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内 容 提 要 


JavaScript 语 言 是 一 种 具有 高 度 表 达能 力 的 、 基 于 原型 特性 的 、 非 
常 灵 活 的 面向 对 象 程序 设计 语言 。 本 书 着 重 于 介绍 JavaScript 在 面 问 
对 象 方面 的 特性 ， 以 为 您 展示 如 何 去 构 建 强健 的 、 可 维护 的 、 功 能 强 
大 的 应 用 程序 及 程序 库 。 

本 书 是 《JavaScript 面 回 对 象 编 程 指南 》 的 第 2 版 ， 全 书包 括 8 草 和 
4 个 附录 。 依 次 介绍 了 JavaScript 的 发 展 历 史 、 基 础 性 话题 (变量 、 数 
据 类 型 、 数 组 、 循 环 以 及 条 件 表达 式 ) 、 琐 数 、 对 象 、 原 型 、 继 承 的 
实现 、BOM 和 DOM 等 。 附 好 部 分 包括 了 学 习 JavaScript 编 程 常 用 的 参 

资源 。 尤 其 值得 一 提 的 是 ， 本 书 作 者 是 JavaScript 设计 模式 方面 的 

专家 ， 他 在 本 书 第 8 革 中 介绍 了 几 种 常用 的 JavaScript 编程 模式 ， 这 
也 成 为 他 的 另 一 本 重要 著作 《JavaScript 模 式 》 (JavaScript Patterns ) 
黄 定 了 基础 。 

本 书 全 面 地 禾 盖 了 JavaScript 语 言 的 00 特 性， 同时 兼顾 基础 知 
识 ， 对 初学 者 来 说 ， 是 难得 的 JavaScript 佳 作 。 读 者 不 需要 具备 任何 的 
JavaScript 基 础 知识 及 项 目 经 验 ， 通 过 学 习 这 本 书 ， 将 会 在 面试 有 关 
JavaScript 程 序 设计 的 职位 时 游 刀 有 余 。 


谋 者 序 


姿 术 把 这 一 版 译 者 序 的 工作 交 给 了 我 ， 这 让 我 兰 恼 了 一 阵子 。 我 
个 人 二 从 来 不 看 序 的 ， 近 术 类 的 国外 翻译 作品 吏 更 不 看 译 者 序 了 。 我 
相信 你 们 也 不 会 看 的 ， 那 我 束 乱 写 了 。 

前 段 时 间 在 网 络 上 看 了 车 洪 才 老 先生 编写 《阿富汗 语词 典 》 的 故 
事 。36 年 ，200 万 字 ， 完 稿 时 已 斗 转 星 移 。 我 记得 我 阅读 的 时 候 在 往 西 
藏 南路 地 铁 站 走 ， 看 着 看 着 便 情 不 目 已， 然后 在 蕊 路 边 大 天。 

我 觉得 翻译 书 是 一 件 非 常 寂寞 的 工作 。 它 需要 强大 的 精神 力 去 目 
台 而 终 地 执行 ， 这 种 精神 力 的 重要 性 甚至 要 高 于 对 专业 水 乎 以 及 英语 
水 平 的 要 求 。 这 本 译作 的 诞生 是 对 我 意志 的 磨 练 ， 我 相信 我 今后 也 不 
会 瑟 记 这 近 百 个 日 夜 ， 我 是 如 何 阅 读 、 翻 译 、 核 对 ， 再 阅读 、 翻 译 、 
核对 ， 反 反复 复 ， 直 到 终结 的 这 一 天 ， 悦 大 隔 世 。 

然而 ， 书 的 修成 不 都 如 此 吗 ? 前 有 明 朝 的 《永乐 大 典 》， 近 有 车 
洪 才 老 先生 的 《阿富汗 语词 典 》。 我 还 看 过 一 部 电影 《 编 丹 记 》， 讲 
述 的 是 一 部 字典 历经 十 余年 的 修成 。 跟 他 们 相 比 ， 这 本 小 小 的 书 所 伦 
费 的 心血 实在 十 不 值 一 提 。 

对 于 读者 也 是 如 此 的 。 我 从 不 相信 21 天 可 以 学 会 任何 一 项 技术 。 
在 这 个 领域 成 为 一 个 专家 ， 并 没有 比 其 他 领域 困难 或 者 容易 更 多 。 如 
同 这 本 书 所 耗费 的 我 的 心力 一 样 ， 计 算 机 技术 将 在 此 生 折磨 你 ， 成 就 
你 (或许 它 已 经 这 么 做 了 ) 。 而 这 本 书 ， 不 过 是 这 漫漫 长 路 的 一 个 驿 
站 。 我 只 不 过 先 于 你 到 此 ， 我 只 不 过 是 个 转述 者 ， 如 此 而 已 。 


我 不 相信 这 本 书 有 字典 一 样 漫 长 的 生命 。 十 年 、 甚 至 只 是 五 年 
后 ， 计 算 机 技术 的 日 新 月 异 可 能 会 让 本 书 一 文 不 值 ， 非 法 网 站 甚至 不 
愿 提供 本 书 的 盗版 (当然 ， 你 应 该 明日 ， 资 版 会 多 么 伤害 本 书 的 所 有 
工作 者 ) 。 然 而 我 们 对 此 坦然 以 待 。 如 同 所 有 序言 要 说 的 :这 是 一 本 
好 书 。 作 为 本 书 原版 最 认真 的 读者 之 一 ， 我 保证 ， 如 果 你 是 这 本 书 的 
日 标 读 者 ， 这 本 书 绝 不 会 白 日 淄 费 你 所 付出 的 时 间 以 及 金钱 。 我 们 知 
道 这 本 书 终 有 一 天 会 被 时 代 的 洪流 所 抛弃 ， 但 是 仍然 将 这 本 书 如 此 呈 
现 给 你 ， 因 为 推动 这 时 代 向 前 的 正 古 未 来 的 你 ， 我 们 乐于 见证 那 一 刻 
的 到 来 一 一 十 年 前 的 IE6 对 目 己 终 将 被 淘汰 的 命运 毫 不 县 惧 ， 此 刻 的 本 
书 也 是 一 样 。 

目 先 感谢 原版 的 两 位 作者 ， 没 有 你 们 当然 就 绝 不 会 有 这 本 书 。 感 
谢 北 杰 的 努力 ， 让 我 有 机 会 参与 这 本 书 的 翻译 。 成 书 背 后 需要 很 多 人 
的 工作 ， 感 谢 这 本 书 所 有 工作 人 员 的 付出 。 感 谢 母亲 在 我 翻译 期 间 对 
我 的 支持 ， 里 然 她 并 不 确切 知道 我 在 做 什么 ， 但 时 值 我 失业 ， 我 决定 
趁 此 机 会 做 一 些 想 做 的 事 ， 她 对 此 没有 半分 怨言 。 特 别 感谢 上 海 市 黄 
浦 区 图 书 饮 七 楼 阅 哆 室 的 工作 人 员 ， 阅 览 室 民 好 的 秩序 全 是 你 们 的 功 
画 ， 也 感谢 你 们 没有 把 目 带 笔 记 本 的 我 赶 出 去 。 

本 书 编写 中 一 定 有 很 多 错漏 及 翻译 不 有 之 处 。 我 看 到 了 你 们 对 于 
第 一 版 的 一 些 反 馈 ， 包 括 但 不 限于 豆瓣 读书 、 亚 马 还 评论 等 ， 感谢 你 
们 的 意见 和 建议 。 对 于 第 二 版 的 反馈 ， 我 在 此 留 下 一 个 github 地 址 ， 
锅 户 能够 与 大 家 交流 : http://github.com/scaret/00js ° 

祝 你 阅读 愉快 。 


陆 禹 浮 
2014-03-09 


佳 者 简介 


Stoyan Stefanov: Facebook 公司 工程 师 、 作 家 、 演 说 家 。 他 经 常 
会 在 博客 (www.phpied.com) 上 与 一 些 相 关 会 议 中 就 Web 开发 话题 发 
表 独 到 见解 。 他 还 运营 着 其 他 一 些 网 站 ， 其 中 包括 JSPatterns.com 
一 个 专门 探讨 JavaScript 模 式 的 网 站 。Stoyan 曾 在 Yahoo! 公 司 任 职 ， 担 
任 YSlow 2.0 以 构 师 职务 ， 并 且 是 图 像 优 化 工具 Smush.it 的 作者 。 

谍 以 此 书 献 给 我 的 妻子 Eva， 及 我 的 女儿 Zlatina 和 Nathale。 感 谢 你 
们 的 耐心 、 支 持 与 求 励 。 

也 将 此 书 献 给 我 的 编辑 们 。 你 们 目 愿 将 时 间 投 入 本 书 草稿 的 审读 
中 。 请 接受 我 由 衷 的 敬意 一 一 非常 感谢 你 们 无 价 的 投入 。 

Kumar Chetan Sharma 原本 一 直 致 力 于 成 为 一 个 电子 工程 师 ， 并 梦 
想 着 打造 一 个 终极 音 啊 系统 。 但 由 于 一 次 偶然 的 机 会 ， 他 得 到 了 一 份 
与 HTML 相 关 的 兼职 ， 然 后 自然 地 学 习 了 CSS 和 JavaScript， 从 此 便 一 
发 不 可 收拾 。 要 知道 在 那个 年 代 ，JavaScript 基 本 上 还 只 能 用 来 验证 表 
单 和 制作 一 些 奇 等 的 DHTML 歼 果 ， 且 下 6 还 在 世界 范围 内 独占 警 头 。 
但 束 从 那 时 起 ， 他 束 已 经 在 开发 基于 LAMP 架 构 的 Web 应 用 了 。 从 日 
色 标 签 的 社交 网 络 应 用 ， 到 为 电信 运营 两 制作 的 Web 控 制 面板 ， 再 到 
联网 的 电子 充电 设备 ， 都 有 他 开发 的 身影 。 目 前 他 在 Yahoo! 公 司 的 搜 
索 部 门 从 事前 端 工 程 师 的 工作 。 


审阅 者 简介 
Alex R. Young: 工程 学 硕士 ， 拥 有 超过 10 年 的 Web 与 移动 行业 经 
他 还 是 DailyJS 网 站 的 首 司 专栏 作家 ， 定 期 以 JavaScript 为 主题 撰写 


文章 。 他 曾 在 多 家 知名 跨国 公司 工作 ， 其 中 包括 Thomson Reuters。 目 
前 他 在 写 一 本 Node 方面 的 书 。 


本 书 是 《JavaScript 面 向 对 象 编 程 指南 》 的 第 二 版 % 前 一 版 由 
Stoyan Stefanov 车 (Packet 出 版 社 发 行 ) ， 在 业界 广 受 好 评 。 然 而 ， 自 
第 一 版 发 行 至 今 已 过 了 五 个 年 头 。 期 间 ，JavaScript 由 一 项 主要 适用 于 
浏览 器 客户 端的 计算 机 技术 ， 逐 渐 发 展 成 为 一 种 多 功能 的 程序 设计 语 
言 ， 其 至 连 服 务 病 也 能 由 它 来 编写 。 所 以 在 这 一 版 中 ， 我 们 继续 带领 
大 家 学 习 JavaScript 的 “语言 部 分 ”， 即 其 重心 依然 会 放 在 JavaScript 语言 
本 身 (独立 于 运行 环境 部 分 ) ， 着 重 讨 论 ECMAScript、JavaScript 面 向 
对 和 象 编程 、 模 式 ， 原 型 继承 以 及 设计 模式 。 

本 书 不 会 对 读者 的 JavaScript 基 础 知识 及 项 目 经 验 做 任何 假设 。 您 
完全 可 以 从 零 开 始 ， 从 本 书 学 习 这 [语言 。 同 时 ， 对 JavaScript 有 一 定 
基础 的 读者 也 可 以 从 中 学 到 更 多 有 用 的 知识 。 另 外 ， 我 们 在 每 一 章 的 
末尾 都 设 有 习题 ， 以 便 帮 助 读者 了 解 自己 的 学 习 进 度 。 

本 书 所 涵盖 的 内 容 

四 第 1 章 : 面 问 对 象 的 JavaScript 简单 阐述 了 JavaScript 这 门 语言 的 
历史 、 现 状 及 未 来 。 另 外 ， 我 们 还 对 面向 对 象 程序 设计 中 的 基础 概念 
做 了 一 些 介绍 ， 并 详细 说 明了 该 语言 调试 环境 (Firebug) 的 安装 、 设 
置 及 应 用 示范 。 

目 第 2 章 : 基本 数据 类 型 、 数 组 、 循 环 及 条 件 表 达 式 讨论 语言 中 的 
一 些 基 础 性 话题 ， 包 括 变 量 、 数 据 类 型 、 数 组 、 循 环 以 及 条 件 表 达 
式 o 

目 第 3 章 : 函数 讨论 的 是 JavaScript 中 国 数 的 使 用 方法 。 在 这 一 墓 
中 ， 我 们 将 系统 地 学 习 天 于 融 数 的 一 切 内 容 。 男 外 ， 我 们 还 会 了 解 变 


量 作 用 域 以 及 内 建 画 数 的 相关 内 容 。 其 中 有 一 个 叫做 “ 闭 包 ” 的 概念 非 
常 有 趣 ， 但 也 很 不 容易 理解 ， 在 该 草 末 尾 ， 我 们 会 重点 介绍 。 

四 第 4 章 : 对 象 介绍 的 是 JavaScript 中 的 对 象 类 型 。 在 这 一 章 中 ， 我 
们 将 学 习 如 何 使 用 对 和 象 的 属性 与 方法 ， 以 及 创建 对 象 的 各 种 方式 。 男 
外 ， 我 们 还 会 讨论 JavaScript 中 的 内 建 对 象 ， 例 如 Array、Function 、 
Boolean、Number、String 等 。 

目 第 5 章 : 原型 介绍 JavaScript 中 有 关 原 型 的 所 有 重要 概念 。 包 括 原 
型 链 的 工作 方式 、hasOwnProperty0 方 法 ， 以 及 JavaScript 中 的 原型 陷阱 
等 。 

四 第 6 人 草 : 继承 讨论 如 何在 JavaScript 中 实现 继承 。 该 章 会 探讨 在 
JavaScript 中 创建 子 类 的 一 种 方式 ， 残 像 那 些 基 于 类 的 面向 对 象 编程 语 
言 一 样 。 

上 第 7 章 : 浏览 器 环境 介绍 浏 顺 器 相关 的 内 容 。 在 这 一 章 中 ， 我 们 
将 会 了 解 到 有 关 BOM (Browser Object Model， 浏 览 器 对 象 模 型 ) 和 
DOM (W3C 的 Document Object Model， 文 档 对 象 模 型 ) 的 知识 ， 并 进 
一 步 了 解 与 浏览 器 事件 和 AJAX 相关 的 内 容 。 

上 第 8 章 : 编程 模式 与 设计 模式 归纳 性 地 介绍 几 种 专用 于 JavaScript 
的 编程 模式 ， 以 及 奉 干 个 与 语言 无 天 但 适用 于 JavaScript 的 设计 模式 。 
这 些 模式 大 部 分 来 自 《 设 计 模 式 》 (GoF) 这 本 书 。 另 外 ， 该 章 也 会 对 
JSON 有 所 讨论 。 

图 [ 付 永 A: 保留 字 列 出 了 JavaScript 中 的 保留 字 。 

国 [ 付 示 B: 内 建 画 数 是 一 份 JavaScript 中 内 建 画 数 的 参考 指南 ， 并 附 
有 简单 的 使 用 范例 。 

加 附录 C: 内 建 对 象 是 一 份 JavaScript 中 内 建 对 象 类 型 的 参考 指南 ， 
它 提供 了 详细 的 对 象 方法 、 属 性 介绍 和 使 用 示例 。 

国 [ 付 未 D: 正则 表达 式 是 一 份 正 则 表达 式 模 式 的 参考 指南 。 


您 可 以 从 下 面 这 个 链接 获取 参考 答案 的 电子 版 : 
http://www.packtpub.com/sites/default/files/downloads/3127O0T_Answers_t 
0_Exercise_Questions.pdf 。 

前 期 准备 

在 阅读 本 书 之 前 ， 您 需要 安装 一 个 现代 浏 质 器 一 一 推荐 Google 
Chrome 或 者 Firefox， 并 可 上 自由 选择 是 否 安装 Node.js。 虽 然 最 新 版 本 的 
Firefox 目 带 了 Web 开 发 者 工具 ， 但 我 们 还 是 非常 推荐 您 使 用 Firebug 插 
件 。 当 然 ， 您 可 以 目 行 选择 用 于 编写 JavaScript 代 码 的 文本 编辑 右 。 

适用 对 象 

本 书 适 用 于 任何 希望 学 习 JavaScript 的 编程 初学 者 ， 包 括 那 些 慌 一 
点 JavaScript， 却 对 其 面向 对 象 特性 不 其 了 解 的 读者 。 

一 些 约定 

在 这 本 书 中 ， 读 者 会 发 现 几 种 不 同样 式 的 文本 ， 它 们 各 目 代 表 了 
不 同类 型 的 信息 。 下 面 ， 我 们 将 通过 一 些 文本 实例 来 解释 一 下 这 些 样 
式 各 目 所 代表 的 含义 。 

对 于 一 段 文本 中 的 代码 ， 我 们 将 以 如 下 形式 来 表现 : “你 可 以 通过 
检查 事件 对 象 的 cancellable 属 性 来 确认 ”。 

而 对 于 代码 块 文本 ， 我 们 将 采用 如 下 格式 : 

Var a; 


var thisISAVariabjle; 


var _and this too; 

var mix12three; 

当 需 要 提醒 你 注意 代码 的 输出 时 ， 我 们 会 将 相关 行 或 项 目的 字体 
加 粗 ， 例 如 : 

> var case_matters = 1]ower'; 

> var CASE MATTERS = "upper'; 


> case_matters,; 


"lower" 

> CASE_MATTERS; 

"upper" 

命令 行 输入 及 输出 会 仿照 如 下 格式 呈现 : 

aliasjsc="/System/Library/Frameworks/JavaScriptCore.framework 
/Versions/Cu rrent/Resources/jsc' 

另外 ， 加 粗 字 体 还 经 常用 于 强调 新 的 术语 或 重要 词汇 。 例 如 ， 我 
们 屏幕 上 的 菜单 以 及 对 话 框 中 会 看 到 的 单词 ， 通 常会 这 样 表述 : “在 单 
击 Cancel 按钮 后 ，preventDefault(0) 方 法 就 会 被 调用 ”。 


这 种 形式 表达 的 是 一 些 需要 读者 警惕 或 需要 重点 关注 | 


的 内 容 ， 
| 总 这 种 形式 所 提供 的 是 一 些 提示 或 小 技巧 ， | 
读者 反馈 


我 们 始终 欢迎 任何 来 目 读者 的 反馈 信息 。 请 务必 让 我 们 了 解 您 对 
于 这 本 书 的 看 法 一 一 您 喜欢 本 书 的 哪 部 分 ， 或 者 不 喜欢 本 书 的 哪 部 
分 。 这 些 反 馈 对 于 我 们 的 选 题 开 发 来 说 都 是 至 关 重 要 的 。 

对 于 一 般 的 反馈 ， 您 只 需 人 简单 地 给 feedback@packtpub.com 发 一 份 
电子 邮件 ， 并 在 邮件 的 标题 中 注 明 这 本 书 的 书 名 即 可 。 

如 果 您 对 某 一 话题 有 专长 ， 并 且 有 兴趣 撰写 一 本 这 方面 的 书 (或 
为 某 本 书 作 出 贡献 ) ， 请 参考 我 们 的 作者 指南 : 
http://www.packtpub.comyauthors。 

客户 支持 

很 荣幸 您 成 为 这 本 Packt 图 书 的 主人 ， 我 们 将 会 尽 一 切 努 力 来 帮助 
您 获取 最 好 的 图 书 资讯 。 


勘误 表 

尽管 我 们 已 经 尽 了 最 大 努力 来 确保 书 中 内 容 的 正确 性 ， 但 错误 始 
终 可 能 存在 。 如 果 您 在 我 们 的 书 中 发 现 了 错误 一 一 无 论 是 天 于 文字 的 
还 是 代码 的 只 要 您 能 告诉 我 们 ， 我 们 都 将 不 胜 感激 。 这 样 也 可 以 
大 大 减少 其 他 读者 在 阅读 方面 所 过 到 的 困难 。 当 您 发 现 错误 时 ， 只 需 
要 访问 http://www.packtpub.com/submit-errata， 选 择 相 应 的 书 名 ， 然 后 
单 击 *errata submission form” 链 接 并 输入 相关 错误 的 详细 信息 即 可 。 一 
旦 您 提供 的 信息 获得 了 确认 ， 相 天 的 内 容 就 会 出 现在 这 本 书 的 勘误 表 
中 。 我 们 出 版 社 所 有 现存 的 勘误 表 都 可 以 在 
http://www.packtpub.com/support 中 获取 。 

版 权 

在 互联 网 上 ， 上 有 版权 对 于 所 有 媒介 一 直 是 一 个 很 大 的 问题 。 在 
Packet， 我 们 癌 来 对 于 版 权 许 可 非常 重视 。 如 果 您 在 网 络 上 发 现 我 们 出 
版 过 的 作品 ， 无 论 它 是 出 于 什么 形式 ， 都 请 马上 将 网 址 或 网 站 名 称 千 
知 我 们 ， 以 便于 我 们 采取 补救 措施 。 

请 将 您 怀疑 有 侵权 行为 的 文档 链接 发 送 到 : 
copyright@packetpub.com。 您 付出 的 帮助 是 对 作者 权利 的 保护 ， 我 们 也 
由 此 才能 继续 为 您 融 来 有 价值 的 内 容 。 

疑问 

如 果 您 对 本 书 有 任何 疑问 ， 也 可 以 通过 questions@packtpub.com 跟 
我 们 联系 ， 我 们 将 竭尽 所 能 地 替 您 解决 。 


和 目 Web 诞生 以 来 ， 人 们 对 于 动态 与 响应 式 页面 的 需求 便 与 日 俱 
增 。 虽 然 静 态 的 HTIML 文 本 页 面 在 可 读 性 方面 或 许 会 更 好 一 些 ， 特 别 是 
在 有 了 CSS 的 辅助 之 后 ， 页 面 排版 显得 更 加 美观 了 ， 但 从 为 一 方面 来 
说 ， 如 果 我 们 能 让 人 们 像 在 桌面 上 那样 使 用 浏览 器 中 的 应 用 程序 ， 事 
情 或 许 会 变 得 更 有 趣 一 些 。 如 今 ， 我 们 已 能 在 浏览 釉 中 直接 使 用 电子 
邮件 、 日 历 、 电 子 银行 、 购 物 、 绘 画 、 游 戏 及 文本 编辑 。 这 都 要 感谢 
一 种 web 编程 语言 一 JavaScript， 是 它 让 这 些 Web 应 用 成 为 了 可 能 。 然 
而 ，JavaScript 最 初 也 只 不 过 是 我 们 偶尔 区 入 在 HTML 中 的 一 小 行 代 
码 ， 但 如 今 它 已 经 日 趋 成 熟 ， 并 且 被 广泛 使 用 。 开 发 者 们 利用 该 编程 
语言 的 面向 对 象 等 性， 实现 了 代码 重用 ， 并 构建 起 了 可 伸缩 的 代码 织 
构 。 

如 有 果 我 们 回顾 一 下 Web 开 发 领域 这 些 年 来 的 流行 词汇 一 一 
DHTML、Ajax、Web 2.0、HITML5， 就 会 发 现 这 些 词 背后 的 内 洒 始 终 
没有 变 ， 依 然 是 : HTML、CSS、JavaScript。 其 中 HTML 服 务 于 内 容 ， 
CSS 服 务 于 表现 ， 而 JavaScript 则 服务 于 行为 。 换 人 句 话 说 ，JavaScript 是 
让 一 切 东 西 协同 运作 的 粘 合 剂 ， 有 了 它 ， 我 们 才能 在 构建 出 丰富 多 彩 
的 Web 应 用 程序 。 

但 事情 远 不 止 如 此 ，JavaSscript 的 应 用 领域 并 不 仅仅 局 限于 Web 和 平 
侣 “ 

在 JavaScript 程序 所 能 运行 的 多 种 宿主 环境 中 ，Web 浏 贤 器 无 颖 是 
用 得 最 普 遇 的 那 一 种 ， 但 JavaScript 也 可 以 运行 于 其 他 环境 。JavaScript 
可 以 应 用 于 各 式 各 样 的 小 工具 、 应 用 扩展 、 以 及 其 他 软件 ， 本 书 在 后 


续 章 节 中 会 一 一 提 及 。 总 而 言 之 ， 将 时 间 投 资 于 学 习 JavaScript 是 一 个 
明智 的 选择 ， 因 为 一 旦 您 掌握 了 JavaScript， 就 可 以 编写 出 各 种 适用 于 
多 种 平台 的 不 同 应 用 ， 包 括 手机 应 用 和 服务 器 端 程序 。 毕 竟 ， 如 今 我 
们 要 说 JavaScript 无 所 不 在 ， 那 确实 是 一 部 都 不 储 张 。 

本 书 将 从 零 开 始 ， 我 们 不 会 对 读者 的 编程 背景 做 任何 假设 ， 只 需 
要 您 了 解 一 点 HTML 常 识 即 可 。 而 且 除 了 有 一 个 章节 用 于 探讨 Web 浏 览 
铬 环境 以 外 ， 本 书 其 他 部 分 都 在 纯粹 地 关注 JavaScript 语 言 本 身 。 因 
此 ， 您 可 以 将 在 本 书 中 学 到 的 知识 应 用 于 所 有 的 JavaScript 环 境 。 

下 面 ， 我 们 将 从 以 下 两 点 开始 : 

对 JavaScript 背 后 故事 的 简单 介绍 ; 

面 辣 对 象 。 


起 初 ，Web 页 面 不 过 是 一 些 以 静态 HTML 文 档 形式 发 布 的 科学 出 版 
物 ， 这 些 文档 之 间 只 依靠 一 些 简单 的 超 链接 (hyperlinks) 绑 定 在 一 
起 。 这 可 能 有 些 难 以 置信 ， 但 最 早 的 Web 页 面 的 确 是 不 支持 任何 图 片 
的 ， 但 这 种 情况 不 久 便 得 到 了 改善 。 随 后 Web 束 越 来 越 广 受 欢迎 ， 规 模 
也 在 不 断 增 大 ， 很 快 随 着 Web 业 务 的 快速 普及 和 增长 ， 网 站 管理 者 越 来 
越 希 望 自 己 所 创建 的 Web 页 面 能 处 理 更 多 的 事情 。 例 如 ， 他 们 希望 网 站 
能 具有 更 丰富 的 用 户 交 互 能 力 ， 主 要 是 能 完成 一 些 简 单 任务 (如 验证 
表单 之 类 ) ， 以 此 和 省 与 服务 需 端 的 信息 交互 。 当 时 他 们 可 以 有 两 种 
选 泉 : Java applets 和 LiveScript。 其 中 ，LiveScript 是 1995 年 由 Netscape 
公司 的 Brendan Eich 所 开发 的 程序 设计 语言 。Netscape 2.0 发 布 之 后 ， 
它 被 正式 更 名 为 JavaScript。 


众所周知 ，Applets 后 来 没落 了 ，JavaScript 则 更 加 索 宁 。 这 种 通过 
在 HTML 中 艇 入 简短 代码 段 来 调整 Web 页 面 中 其 他 静态 元 素 的 方式 在 网 
站 管理 者 间 大 受 好 评 。 但 没 过 多 人 ， 浏 览 吉 的 竞争 厂商 Microsoft 公司 
就 发 布 了 文 持 JScript 的 Internet Explorer (IE) 3.0。JScript 简 直 就 是 
JavaScript 的 翻版 ， 并 且 还 在 其 继承 之 上 引入 了 一 些 正 独 有 的 特性 。 最 
终 ， 为 了 使 语言 的 实现 更 趋 癌 于 标准 化 ， 于 是 ECMAScript 应 运 而 生 
了 。ECMA (欧洲 计算 机 制造 商 协 会 ) 创建 了 ECMA-262 标 准 ， 该 标准 
脱离 了 浏 斋 右 和 那些 Web 独 有 的 特性 ， 集 中 描述 了 JavaScript 作 为 编程 
语言 的 核心 部 分 。 

大 致 上 ，JavaScript 文 个 术语 通 负 滴 盖 了 以 下 3 个 部 分 。 

ECMAScript 一 一 语言 的 核心 部 分 〈 即 变量 ， 画 数 ， 循 环 等 等 ) : 
这 个 部 分 独立 于 浏览 絮 之 外 ， 并 可 以 在 其 他 环境 中 使 用 。 

文档 对 象 模型 (DOM) : 它 实际 上 是 提供 了 一 种 与 HTML 、XML 
文档 交互 的 方式 。 最 初 ，JavaScript 只 能 提供 对 页 面 上 一 部 分 元 叉 的 有 
限 访 问 能 力 ， 主 要 集中 在 表单 ， 超 链接 和 图 片 这 些 元 素 上 。 后 来 权限 
未 渐 被 扩大 ， 如 今 几 乎 所 有 元 素 都 已 经 可 以 访问 了 。 为 此 ， 万 维 网 联 
盟 〈《W3C) 还 专门 创建 了 DOM 标 准 。 该 标准 是 一 种 独立 的 ( 即 它 并 不 
依赖 于 JavaScript) 操作 结构 化 文档 的 方式 。 

浏览 器 对 象 模型 (BOM) : 这 实际 上 是 一 个 与 浏览 器 环境 有 关 的 
对 象 集 合 。 原 本 没有 任何 标准 可 言 ， 直 到 HIML5 诞 生 之 后 ， 人 们 才 定 
义 了 一 些 浏 览 右 之 间 通 用 的 对 象 标准 。 

虽然 本 书 专门 有 一 个 章节 用 于 冰 述 浏览 器 、DOM 及 BOM， 但 大 部 
分 内 容 还 都 在 讲述 JavaScript 语言 的 核心 部 分 ， 您 在 这 里 所 学 到 的 
JavaScript 知识 基本 都 可 应 用 于 任何 JavaScript 执 行 环境 。 


1.2 ) 与 复兴 


无 论 结果 是 好 是 坏 ，JavaScript 都 在 随后 爆发 的 第 一 次 浏览 右 大 战 
(大 约 是 在 1996 年 到 2001 年 间 ) 中 得 到 了 迅速 的 普及 。 那 时 正 值 互 联 
网 发 展 处 于 第 一 波 热 沽 ， 其 中 主要 由 Netscape 和 Microsoft 这 两 大 浏览 右 
厂商 在 搜 村 市 场 份额 。 在 此 过 程 中 ， 他 们 不 断 地 把 各 种 浮华 的 特性 添 
加 到 各 自 的 浏览 器 与 JavaScript、DOM 及 BOM 中 ， 从 而 导致 了 许多 不 一 
致 性 。 与 此 同时 ， 由 于 浏览 絮 厂 商都 在 忙于 继续 增加 新 的 浏览 器 特 
性 ， 以 至 于 根本 没 能 及 时 更 新 相应 的 工具 ， 这 造成 了 开发 工具 的 严重 
滞后 。 这 种 情况 给 使 用 JavaScript 的 开发 人 员 带 来 巨大 的 痛苦 。 我 们 将 
某 个 浏览 絮 里 编写 与 测试 过 的 脚本 在 男 一 个 浏览 如 里 测试 ， 却 发 现 脚 
本 不 能 正常 工作 ， 而 且 还 没有 合适 的 错误 信息 ， 只 得 到 如 “操作 终止 ” 
之 类 天 书 般 的 错误 先知 。 
实现 上 的 不 一 致 ， 文 档 的 缺乏 ， 甚 至 连 能 将 JavaScript 关键 字 高 亮 
显示 的 编辑 器 都 没有 。 这 一 切 都 令 开 发 者 们 再 也 没 法 忍受 了 。 
在 男 一 方面 ， 开 发 者 自己 也 在 他 们 的 Web 页 面 中 使 用 了 太 多 的 新 特 
性 ， 总 迫不及待 地 想 引 入 浏览 砷 提供 的 每 一 项 新 功能 ， 以 “加 强 ” 目 己 
的 页 面 。 例 如 状态 栏 中 的 动画 、 闪 炬 的 颜色 、 闪烁 的 文本 、 会 播 晃 的 
浏 贤 器 窗口 、 屏 人 幕 上 的 雪花 效果 、 能 跟踪 对 象 的 女 标 光标 等 ， 这 不 但 
牺牲 了 实用 性 ， 而 且 也 伤害 了 用 户 体验 。 这 些小 用 现象 如 今 大 多 都 消 
失 了 ， 但 这 在 当时 极 大 地 损坏 了 JavaScript 在 业界 的 名 声 。 许 多 “专业 
的 ”程序 员 将 JavaScript 岂 低 为 设计 师 的 玩具 ， 并 批评 它 不 适合 用 来 开发 
专业 应 用 。JavaScript 语言 在 一 些 Web 项 目 中 遭 到 了 强烈 抵制 。 某 些 项 
目 甚 至 完全 拒绝 对 浏 贤 右 端 进行 任何 的 程序 设计 ， 转 而 只 信任 他 们 自 
己 可 以 掌控 的 服务 右 端 。 确 实 ， 在 当时 那 种 情况 下 ， 也 没有 什么 理由 
值得 我 们 花费 双 倍 的 时 间 来 为 这 些 不 同 的 浏 唤 器 设计 项 目 ， 然 后 再 伦 
更 多 的 时 间 去 调试 它们 。 
这 种 情况 一 直 持 续 到 第 一 次 浏 唤 癸 大 战 结束 。 但 在 随后 的 几 年 
中 ，Web 开 发 领域 在 一 系列 历史 进程 的 推动 下 ， 终 于 发 生 了 一 些 非 常 积 


极 的 变化 。 

Microsoft 公司 依靠 新 发 布 的 IE6 赢得 了 战争 。 在 那 时 ，IE6 虽然 的 
确 是 最 棒 的 浏览 器 ， 但 其 后 数 年 ， 他 们 却 停 止 了 对 下 的 开发 ， 这 给 了 
其 他 浏 蜗 絮 充分 的 时 间 ， 使 它们 能 够 在 功能 上 逐步 完成 对 下 的 追赶 和 
超越 。 

Web 标准 化 运动 渐 渐 被 开发 人 员 和 浏 唤 器 三 两 所 接受 。 这 是 很 日 
然 的 ， 毕 况 对 于 开发 人 员 来 说 ， 谁 也 不 想 因为 不 同 的 浏览 器 而 花费 双 
倍 (甚至 更 多 ) 的 开发 时 间 ， 这 促使 各 方 都 越 来 越 倾 向 于 遵守 统一 的 
开发 标准 。 

开发 人 员 和 技术 本 喘 也 日 趋 成 部 了 ， 越 来 越 多 的 人 开始 将 注意 力 
转移 到 其 他 方面 ， 例 如 可 用 性 、 产 进 增强 技术 及 可 访问 性 。 开 发 辅助 
工具 (例如 Firebug) 也 让 开发 变 得 更 高 效 ， 减 轻 了 开发 者 的 负担 。 

在 这 种 健康 环境 的 影响 下 ， 开 发 人 员 开 始 谋求 一 种 更 好 的 新 型 开 
发 模式 ， 以 取代 这 些 现 有 的 开发 方式 。 随 着 Gmail 和 Google Maps 这 一 
类 是 客户 端 应 用 的 相继 出 现 ， 很 显然 ， 如 今 的 JavaScript 已 经 成 为 一 种 
成 熟 的 、 某 些 方面 独一无二 的 、 拥 有 强大 原型 体系 的 面向 对 象 语言 。 
关于 这 点 ， 最 好 的 例子 莫 过 于 是 对 XMLHttpRequest 对 象 的 重新 发 现 和 
推广 ， 该 对 象 起 初 不 过 是 一 个 IE-only 特 性 ， 但 如 今 已 经 得 到 绝 大 多 数 
浏览 器 的 支持 。 通 过 XMLHttpRequest 对 象 ，JavaScript 就 能 以 HTTP 请 
求 的 形式 从 服务 器 上 获取 所 需 的 新 鲜 内 容 ， 从 而 实现 了 页 面 的 局 部 更 
新 。 这 样 一 来 ,我 们 就 不 必 每 次 都 刷新 整个 页 面 。 随 着 
XMLHttpRequest 对 象 的 广泛 应 用 ， 一 种 类 桌面 式 的 web 应 用 模式 诞生 
了 ， 我 们 称 之 为 AJAX 应 用 。 


1.3 现 ; 


有 意思 的 是 ，JavaScript 必须 运行 于 某 种 宿主 环境 中 。Web 浏 贤 器 
仅仅 是 其 中 一 种 ， JavaScript 也 完全 可 以 运行 在 服务 事端 、 晶 面 以 及 移 
动 设备 中 。 如 今 ， 我 们 已 经 可 以 用 JavaScript 来 实现 以 下 功能 。 

创建 拥有 强大 而 丰富 功能 的 Web 应 用 程序 (这 种 应 用 程序 往往 运 
行 在 Web 浏览 器 中 ) 。 另 外 还 有 基于 HTML5 的 许多 特性 ， 例 如 应 用 组 
存 、 本 地 存储 、 本 地 数据 库 。 无 论 是 线 上 应 用 还 是 离线 应 用 ，Web 应 用 
都 可 以 做 得 非常 强大 。 

使 用 .NET 和 Node.js 编写 服务 器 端 脚本 ， 或 者 使 用 Rhino (这 是 一 
种 用 Java 实现 的 JavaScript 引 擎 ) 这 样 的 框架 来 进行 编程 。 

为 移动 设备 编写 各 种 应 用 程序 。 借 助 于 PhoneGap 及 Titanium 这 样 
的 工具 ， 我 们 完全 可 以 使 用 纯 JavaScript 来 编写 iPhone、Android 或 其 他 
平台 上 应 用 程序 。 另 外 值得 一 提 的 是 ， 移 动 平 台 Firefox OS 的 原生 编 
程 语 言 就 是 JavaScript、HTML 和 CSS 。 

使 用 ActionScript 创建 富 媒体 应 用 (如 Flash 、Flex ) 
ActionScript 也 是 一 种 基于 ECMAScript 标 准 的 脚本 语言 。 

编写 各 种 基于 命令 行 的 、 用 于 加 面目 动 化 绾 理 的 脚本 任务 。 其 日 
带 的 宿主 环境 如 Windows Scripting Host 及 Mac 下 的 WebKit JavaScript 
Core。 

为 一 些 时 面 应 用 程序 编写 扩展 或 插件 ， 例 如 Dreamweaver、 
Photoshop 及 大 多 数 浏览 右 。 

使 用 Mozilla XUIRunner 及 Adobe Air 创 建 跨 操 作 系 统 的 桌面 应 用 程 
序 o 

使 用 Yahoo! Widgets 及 Mac Dashboard Widgets 等 工具 包 来 创建 桌面 
小 工具 。 其 中 ， Yahoo! Widgets 还 可 以 在 智能 电视 上 运行 。 

当然 ， 这 里 列 出 的 远 远 不 是 该 语言 的 全 部 应 用 。JavaScript 应 用 的 
确 发 端 于 Web 页 面 ， 但 如 今 几乎 可 以 说 是 无 所 不 在 了 。 画 外 ， 浏 览 右 三 
商 如 今 都 将 运行 速度 视 为 产品 的 竞争 优势 之 一 ， 因 此 都 致力 于 创建 更 


快 的 JavaScript 引 警 。 这 对 于 用 户 与 开发 者 来 说 无 疑 是 个 好 消息 ， 并 且 
这 将 打开 一 而 大 门 ] 在 新 的 领域 ， 例 如 在 图 像 、 音 频 及 视频 处 理 、 
游戏 开发 等 方面 ，JavaScript 也 必 将 一 展 拳脚 。 


1.4 展望 未 来 


对 于 未 来 的 情况 ， 我 们 这 里 只 能 做 一 些 猜测 。 但 几乎 可 以 肯定 地 
说 ，JavaScript 语 言 必 将 会 有 它 的 一 席 之 地 。 和 毕竟， 在 过 去 相当 长 的 一 
段 时 间 里 ，JavaScript 在 被 严重 低估 、 始 终 未 得 到 充分 利用 (或 者 被 错 
误 地 滥用 了 ) 的 情况 下 ， 依 然 几 乎 每 天 都 能 有 很 多 新 的 、 有 趣 的 
JavaScript 应 用 被 开发 出 来 。 一 切 都 是 从 那 行 测 单 的 、 内 骸 于 HIML 标 
签 中 (例如 ondlick 事 件 ) 的 代码 开始 的 。 如 今 的 开发 人 员 所 面 对 的 商 
业 开 发 往往 要 复杂 得 多 ， 这 需要 良好 的 设计 和 规划 ， 以 及 合适 的 应 用 
扩展 和 程序 库 。JavaScript 必 将 在 其 中 得 到 真正 的 用 武之 地 ， 开 发 人 员 
无 疑 会 更 加 重视 它 独 有 的 面向 对 象 特性 ， 以 获取 越 来 越 多 的 便利 。 

曾经 被 列 为 职位 要 求 中 的 “加 分 项 ”的 JavaScript， 如 今 已 经 成 为 了 
招聘 Web 开发 人 员 的 决定 性 因素 。 例 如 ， 我 们 在 面试 时 常会 被 问 到 这 
样 的 问题 : “JavaScript 是 一 种 面 癌 对 象 语言 吗 ? 如 果 是 ，JavaScript 中 
的 继承 天 系 是 如 何 实现 的 呢 ? ”在 读 过 这 本 书 之 后 ， 您 就 会 对 这 类 面试 
有 充分 的 准备 ， 其 至 还 能 任 借 一 些 连 面试 官 自 己 都 不 知道 的 知识 来 打 
动 他 们 。 


1.5 ECMAScript5 


几乎 所 有 的 现代 浏 贤 絮 与 其 他 相关 环境 都 实现 了 ECMAScript 的 第 3 
版 ， 对 此 我 们 可 以 安心 使 用 。 第 4 版 则 直接 被 跳 过 了 “。 而 ECMAScript 的 
第 5 版 (以 下 简称 为 ES5) 则 到 2009 年 12 月 才 被 正式 采纳 。 

ES5 中 除了 引入 了 一 些 新 的 对 象 与 属性 外 ， 它 还 提供 了 “严格 模式 

(strict mode) ”。 所 谓 严 格 模 式 其 实 就 是 在 ES5 发 布 之 前 ， 市 面 上 各 版 
互 不 兼容 语言 的 子 集 。 严 格 模式 是 可 选 的 ， 也 吏 十 说 ， 选 择 以 严格 模 
式 执行 的 代码 段 (以 函数 为 单位 ， 或 者 整个 程序 ) 都 必须 要 在 其 头 部 
作 如 下 声明 : 

"use strict"; 

这 其 实 是 一 个 JavaScript 字符 串 。 虽 然 我 们 并 没有 将 其 赋值 给 某 个 
变量 ， 执 行 后 也 不 会 有 什么 效果 ， 但 它 符合 JavaScript 语 法 。 因 此 不 文 
持 ES5 疗 格 模式 的 老式 浏览 絮 会 直接 忽略 它 ， 然 后 以 普通 的 JavaScript 
对 待 其 后 的 代码 。 也 就 是 说 ， 这 种 严格 模式 是 向 后 兼容 的 ， 使 用 严格 
模式 不 会 导致 老式 浏 哆 侣 无 法 执行 代码 。 

或 许 在 将 来 的 版 本 中 ， 严 格 模 式 由 可 能 会 成 为 ES 的 默认 模式 ， 甚 
至 是 唯一 模式 。 但 现在 它 还 只 是 一 个 可 选项 。 

出 于 回 后 兼容 的 考虑 ， 本 书 所 有 的 示例 都 将 遵守 ES3 规 则 ， 但 同时 
本 书 中 所 有 的 代码 也 都 能 在 ES5 严 格 模 式 下 正常 执行 ， 不 会 有 任何 警 
告 。 男 外 ， 本 书 中 专门 为 ES5 所 写 的 部 分 会 被 清楚 地 标记 出 来 。 而 关于 
ES5 的 新 特性 ， 我 们 在 附录 C， 内 建 对 象 中 会 有 详细 收录 。 


在 深入 学 习 JavaScript 之 前 ， 我 们 首先 要 了 解 一 下 “面向 对 象 ”的 具 
体 合 义 ， 以 及 这 种 程序 设计 风格 的 主要 特征 。 下 面 我 们 列 出 了 一 系列 
在 面向 对 象 程序 设计 (OOP) 中 最 常用 到 的 概念 : 


对 象 、 方 法 、 属 性 
类 
封装 


信人 
聚合 ; 


重用 与 继承 ; 

现在 ， 我 们 束 来 详细 了 人 解 每 个 概念 。 当 然 ， 如 果 您 在 面向 对 象 程 
序 设计 方面 是 一 个 新 手 ， 或 者 不 能 确定 自己 是 否 真 的 理解 了 这 些 概 
念 ， 那 也 不 必 太 过 担心 。 以 后 我 们 还 会 通过 一 些 代码 来 为 您 具体 分 析 
它们 。 尽 管 这 些 概念 说 起 来 好 像 很 复杂 、 很 高 级 ， 但 一 旦 我 们 进入 真 
正 的 实践 ， 事 情 往往 就 会 简单 得 多 。 


1.6.1 对 象 


既然 这 种 程序 设计 风格 叫做 面向 对 象 ， 那 么 其 重点 就 应 该 在 对 象 
上 。 而 所 谓 对 象 ， 实 质 上 就 是 指 “ 事 物 ”( 包 括 人 和 物 ) 在 程序 设计 语 
言 中 的 表现 形式 。 这 里 的 “事物 ”可 以 是 任何 东西 (如 某 个 客观 存在 的 
对 象 ， 或 者 某 些 较为 抽象 的 概念 ) 。 例 如 ， 对 于 独 这 种 常见 对 象 来 
说 ， 我 们 可 以 看 到 它们 具有 某 些 明确 的 特征 (如 颜色 、 名 字 、 体 型 
等 ) ， 能 执行 某 些 动作 〈《 如 星 噶 叫 、 睡 觉 、 躲 起 来 逃跑 等 ) 。 在 
OOP 语 义 中 ， 这 些 对 象 特征 都 叫做 属性 ， 而 那些 动作 则 被 称 为 方法 。 

此 外 ， 我 们 还 有 一 个 口语 方面 的 类 比 叫 。 

对 象 往往 是 用 名 词 来 表示 的 〈 如 book、person) 。 

方法 一 般 都 是 些 动 词 (如 read、run) 。 

属性 值 则 往往 是 一 些 形容 词 。 

我 们 可 以 试 一下。 例如 ， 在 “The black cat sleeps on my head” 这 个 句 
子 中 , “the cat” (名词) 就 是 一 个 对 象 ，“black”( 形 容 词 ) 则 是 一 个 颜 


色 属 性 值 ， 而 “sleep” (动词 ) 则 代表 一 个 动作 ， 也 就 是 OOP 语 义 中 的 
方法 。 甚 至 ， 为 了 进一步 证 明 这 种 类 比 的 合理 性 ， 我 们 也 可 以 将 句子 
中 的 “on my head” 看 做 动作 “sleep” 的 一 个 限定 条 件 ， 因 此 ， 它 也 可 以 被 
当做 传递 给 sleep 方 法 的 一 个 参数 。 


1.6.2 类 


在 现实 生活 中 ， 相 似 对 象 之 则 往往 都 有 一 些 共 同 的 组 成 特征 。 例 
如 蜂 乌 和 老鹰 都 具有 乌 类 的 特征 ， 因 此 它们 可 以 被 统称 为 乌 类 。 在 
OOP 中 ， 类 实际 上 融 是 对 象 的 设计 监 图 或 制作 配方 。“ 对 象 " 这 个 词 ， 
我 们 有 时 候 也 叫做 “实例 *， 所 以 我 们 可 以 说 老鹰 是 乌 类 的 一 个 实例 .加 
。 我 们 可 以 基于 同一 个 类 创建 出 许多 不 同 的 对 象 。 因 为 类 更 多 的 是 一 
种 模板 ， 而 对 象 则 是 在 这 些 模板 的 基础 上 被 创建 出 来 的 实体 。 

但 我 们 要 明白 ，JavaScript 与 C++ 或 Java 这 种 传统 的 面向 对 象 语言 不 
同 ， 它 实际 上 压根 儿 没 有 类 。 该 语言 的 一 切 都 是 基于 对 象 的 ， 其 依 徘 
的 是 一 套 原 型 (prototype) 系统 。 而 原型 本 号 实际 上 也 是 一 种 对 象 ， 我 
们 后 面 也 会 再 来 详细 讨论 这 个 问题 。 在 传统 的 面 问 对 象 语 言 中 ， 我 们 
一 般 会 这 样 描述 自己 的 做 法 :“ 我 基于 Person 类 创建 了 一 个 叫做 Bob 的 新 
对 象 。” 而 在 这 种 基于 原型 的 面 回 对象 语言 中 ， 我 们 则 要 这 样 描述 : 
“我 将 现 有 的 Person 对 象 扩展 成 了 一 个 叫做 Bob 的 新 对 象 。” 


1.6.3 封装 


封装 是 另 一 个 与 OOP 相 关 的 概念 ， 其 主要 用 于 阐述 对 象 中 所 包含 
的 内 容 。 封 装 概 念 通 第 由 两 部 分 组 成 。 

相关 的 数据 (用 于 存储 属性 ) 。 

基于 这 些 数据 所 能 做 的 事 (所 能 调用 的 方法 。 


除 此 之 外 ， 这 个 术语 中 还 有 另 一 层 信 息 隐 藏 的 概念 ， 这 完全 是 另 
一 方面 的 问题 。 因 此 ， 我 们 在 理解 这 个 概念 时 ， 必 须要 留意 它 在 OOP 
中 的 具体 语 境 。 

以 一 个 MP3 播 放 器 为 例 。 如 果 我 们 假设 它 是 一 个 对 象 ， 那 么 作为 
该 对 象 的 用 户 ， 我 们 无 疑 需要 一 些 类 似 于 像 按 钮 、 显 示 屏 这 样 的 工作 
接口 。 这 些 接口 会 帮助 我 们 使 用 该 对 象 《如 播放 歌曲 之 类 ) 。 至 于 它 
们 内 部 是 如 何 工 作 的 ， 我 们 并 不 清楚 ， 而 且 大 多 数 情 况 下 也 不 会 在 平 
这 些 。 换 句 话 说， 这 些 接口 的 实现 对 我 们 来 说 是 隐藏 的 。 同 样 的 ， 在 
OOP 中 也 是 如 此 。 当 我 们 在 代码 中 调用 一 个 对 象 的 方法 时 ， 无 论 该 对 
象 是 来 自我 们 自己 的 实现 还 是 某 个 第 三 方 库 ， 我 们 都 不 需要 知道 该 方 
法 是 如 何 工 作 的 。 在 编译 型 语言 中 ， 我 们 甚至 都 无 法 查看 这 些 对 象 的 
工作 代码 。 由 于 JavaScript 是 一 种 解释 型 语言 ， 源 代码 是 可 以 查看 的 。 
但 至 少 在 封装 概念 上 它们 是 一 致 的 ， 即 我 们 只 需要 知道 所 操作 对 象 的 
接口 ， 而 不 必 去 天 心 它 的 具体 实现 。 

天 于 信息 隐藏 ， 还 有 男 一 方面 内 容 ， 即 方法 与 属性 的 可 见 性 。 在 
某 些 语言 中 ， 我 们 能 通过 public、private、protected 这 些 关 键 字 来 限定 
方法 和 属性 的 可 见 性 。 这 种 限定 分 类 定义 了 对 象 用 户 所 能 访问 的 层 
次 。 例 如 ，private 方法 只 有 其 所 在 对 象 内 部 的 代码 才 有 权 访 问 ， 而 
public 方 法 则 是 任何 人 都 能 访问 的 。 在 JavaScript 中 ， 尽 管 所 有 的 方法 和 
属性 都 是 public 时 ， 但 是 我 们 将 会 看 到 ， 该 语言 还 是 提供 了 一 些 隐藏 数 
据 的 方法 ， 以 保护 程序 的 隐 密 性 。 


1.6.4 育 合 


所 谓 聚 合 ， 有 时 候 也 叫做 组 合 ， 实 际 上 十 指 我 们 将 几 个 现 有 对 象 
合并 成 一 个 新 对 象 的 过 程 。 总 之 ， 这 个 概念 所 强调 的 就 是 这 种 将 多 个 
对 和 象 合 而 为 一 的 能 力 。 通 过 宫 合 这 种 强 有 力 的 方法 ， 我 们 可 以 将 一 个 


问题 分 解 成 多 个 更 小 的 问题 。 这 样 一 来 ， 问 题 束 会 显得 更 易于 管理 
(便于 我 们 各 个 击破 ) 。 当 一 个 问题 域 的 复杂 程度 令 我 们 难以 接受 

时 ， 我 们 惑 可 以 考虑 将 它 分 解 成 寿 干 子 问 题 区 ， 并 且 必 要 的 话 ， 这 些 
问题 区 还 可 以 再 继续 分 解 成 更 小 的 分 区 。 这 样 做 有 利于 我 们 从 几 个 不 
同 的 抽象 层次 来 考虑 这 个 问题 。 

例如 ， 个 人 电脑 是 一 个 非常 复杂 的 对 象 ， 我 们 不 可 能 知道 它 启 动 
时 所 发 生 的 全 部 事情 。 但 如 果 我 们 将 这 个 问题 的 抽象 级 别 降 低 到 一 害 
的 程度 ， 只 关注 它 几 个 组 件 对 象 的 初始 化 工作 ， 例 如 显示 器 对 象 、 鼠 
标 对 象 、 键 盘 对 象 等 ， 我 们 束 很 容易 深入 了 解 这 些 子 对 象 情况 ， 然 后 
再 将 这 些 部 分 的 结果 合并 起 来 ， 之 前 那个 复杂 问题 束 迎 为 而 解 了 。 

我 们 还 可 以 找到 其 他 类 似 情 况 ， 例 如 Book 是 由 一 个 或 多 个 author 对 
象 、publisher 对 象 、 若 干 chapter 对 象 以 及 一 组 table 对 象 等 组 合 (聚合 ) 
而 成 的 对 象 。 


1.6.5 继承 


通过 继承 这 种 方式 ， 我 们 可 以 非常 优雅 地 实现 对 现 有 代码 的 重 
用 。 例 如 ， 我 们 有 一 个 叫做 Person 的 一 般 性 对 象 ， 其 中 包含 一 些 姓名 、 
出 生日 期 之 类 的 属性 ， 以 及 一 些 功能 性 函数 ， 如 步行 、 谈 话 、 有 睡觉 、 
吃饭 等 。 然 后 ， 当 我 们 发 现 自己 需要 一 个 Programmer 对 象 时 ， 当 然 ， 
这 时 候 你 可 以 再 将 Person 对 象 中 所 有 的 方法 与 属性 重新 实现 一 迄 ， 但 除 
此 之 外 还 有 一 种 更 聪明 的 做 法 ， 即 我 们 可 以 让 Programmer 继 承 目 
Person， 这 样 就 省 去 了 我 们 不 少 工作 。 因 为 Programmer 对 象 只 需要 实现 
属于 它 自 己 的 那 部 分 特殊 功能 (例如 “编写 代码 *”) ， 而 其 余部 分 只 需 
重用 Person 的 实现 即 可 。 

在 传统 的 OOP 环 境 中 ， 继 承 通常 指 的 是 类 与 类 之 间 的 关系 ， 但 由 
于 JavaScript 中 不 存在 类 ， 因 此 它 的 继承 只 能 发 生 在 对 象 之 间 。 


当 一 个 对 象 继承 自 男 一 个 对 象 时 ， 通 常会 往 其 中 加 入 新 的 方法 ， 
以 扩展 说 继承 的 老 对 象 。 我 们 通常 将 这 一 过 程 称 之 为 “BB 继承 自 A” 或 者 
“B 扩 展 自 A”。 男 外 对 于 新 对 和 象 来 说 ， 它 也 可 以 根据 自己 的 需要 ， 从 继 
承 的 那 组 方法 中 选择 几 个 来 重新 定义 。 这 样 做 并 不 会 改变 对 象 的 接 
口 ， 因 为 其 方法 名 是 相同 的 ， 只 不 过 当 我 们 调用 新 对 象 时 ， 该 方法 的 
行为 与 之 前 不 同 了 。 我 们 将 这 种 重 定 义 继承 方法 的 过 程 叫 做 复写 。 


1.6.6 多 态 


在 之 前 的 例子 中 ， 我 们 的 Programmer 对 象 继 承 了 上 一 级 对 象 Person 
的 所 有 方法 。 这 意味 着 这 两 个 对 象 都 实现 了 “talk” 等 方法 。 现 在 ， 我 们 
的 代码 中 有 一 个 叫做 Bob 的 变量 ， 即 便 是 在 我 们 不 知道 它 是 一 个 Person 
对 象 还 是 一 个 Programmer 对 象 情况 下 ， 也 依然 可 以 直接 调用 该 对 象 的 
“talk" 方 法 ， 而 不 必 担 心 这 会 影响 代码 的 正常 工作 。 类 似 这 种 不 同 对 象 
通过 相同 的 方法 调用 来 实现 各 目 行 为 的 能 力 ， 我 们 束 称 之 为 多 态 。 


1.7 OOP 人 小 结 


下 面 ， 让 我 们 再 来 回顾 一 下 这 些 概 念 ( 见 表 1-1) 。 
表 1:=1 


特征 描述 相应 概念 


Bob 是 一 个 男人 《后 者 是 一 个 对 象 ) 对 象 

Bob 出 生 于 1980 年 6 月 1 日 男性， 黑头 发 属性 

Bob 能 吃饭 、 睡 觉 、 喝 水 、 做 梦 ， 以 及 记录 自己 的 年 龄 方法 

Bob 是 Programmer 类 的 一 个 实例 传统 OOP 中 的 类 

Bob 是 一 个 由 Programmer 对 象 扩展 而 来 的 新 对 象 基于 原型 OOP 中 的 原型 对 象 
Bob 对 象 中 包含 了 数据 (例如 出 生日 期 和 基于 这 些 数 据 的 方法 (例如 封装 

记录 年 龄 ) 


我 们 并 不 需要 知道 其 记录 年 龄 的 方法 是 如 何 实现 的 。 对 象 通常 都 可 以 拥有 一 
些 私 有 数据 ， 例 如 对 装 年 二 月 的 天 数 ， 我 们 就 不 知道 ， 而 且 也 不 会 想 知道 
Bob 只 是 是 整个 Web 开发 团队 对 象 的 一 部 分 , 此 外 开发 团队 对 象 还 包含 
了 一 个 Designer 对 象 Jill， 以 及 一 个 ProjectManager 对 象 Jack 


特征 描述 相应 概念 
Designer、ProjectManager、Programmer 都 是 分 别 扩 展 自 Person 


对 象 的 新 对 象 


我 们 可 以 随时 调用 Bob、Jill 和 Jack 这 三 个 对 象 各 自 的 talk 方法 ， 它 们 
都 可 以 正常 工作 ,尽管 这 些 方 法 会 产生 不 同 的 结果 (如 Bob 可 能 谈 得 更 
多 的 是 代码 的 性 能 ，JIL1 更 倾向 于 谈 代码 的 优雅 性 ， 而 Jack 强调 的 是 最 
后 期 限 )。 总 之 ， 每 个 对 象 都 可 以 重新 自 定义 它们 的 继承 方法 talk 


多 态 、 方 法 履 写 


1.8 训练 ¥ 置 


在 这 本 书 中 ， 凡 涉及 代码 的 我 们 都 强调 “ 目 己 动手 ”>， 因 为 在 我 们 
的 理念 中 ， 学 好 一 门 编程 语言 最 好 的 途径 束 是 不 停 地 编写 代码 。 
此 ， 这 里 将 不 提供 任何 可 供 您 直接 复制 / 粳 贴 的 代码 下 载 。 恰 恰 相 反 ， 
我 们 必须 得 让 您 亲 目 来 输入 代码 ， 并 观察 它们 是 如 何 工作 的 ， 思 考 需 


要 做 哪些 调整 ， 这 样 周而复始 地 摆弄 它们 。 因 而 ， 当 您 想 笑 试 这 些 代 
码 示 例 时 ， 我 们 建议 您 使 用 JavaScript 控 制 台 这 一 类 的 工具 。 下 面 就 让 
我 们 来 看 看 这 些 工 具 是 如 何 使 用 的 。 

对 于 开发 人 员 来 说 ， 机 器 上 应 该 大 多 都 早已 安装 了 一 些 Web 浏 览 吉 
了 ， 例 如 Firefox、Safari、Chrome 或 Internet Explorer。 而 所 有 现代 浏 宽 
铬 中 都 应 该 日 之 了 JavaScript 控制 台 组 件 ， 该 组 件 是 我 们 在 阅读 本 书 过 
程 中 始终 会 用 到 的 东西 ， 是 帮助 您 进行 语言 学 习 和 实验 的 环境 。 更 具 
体 地 说 ， 尽 管 本 书 用 的 是 WebKit 控 制 台 〈Safari 和 Chrome 都 支持 该 控制 
台 ) ， 但 书 中 的 这 些 示例 在 任何 控制 台 上 都 是 能 正常 工作 的 。 


1.8.1 WebKit “Web 审查 工具 


图 1-1 展 示 了 如 何在 控制 台中 通过 输入 代码 的 方式 将 google.com 主 
页 上 的 logo 换 成 我 们 目 己 指定 的 图 片 。 如 您 所 见 ， 我 们 可 以 在 任何 页 面 
上 测试 这 段 JavaScript 代 码 。 

在 Chrome 和 Safari 中 ， 您 可 以 通过 右键 单 击 相关 页 面 ， 并 选择 “ 审 
查 元 素 ” 来 打开 控制 台 。 然 后 Web 审 查 工 具 束 会 出 现在 下 面 的 弹出 窗口 
中 ， 我 们 选择 其 标签 栏 上 的 “控制 台 ” 标 签 ， 束 来 到 了 真正 的 控制 台 界 
面 中 。 

然后 ， 我 们 直接 在 控制 台中 输入 代码 ， 按 下 回 车 键 ， 代 码 束 会 被 
执行 。 其 返回 值 也 会 在 控制 台中 被 打印 出 来 。 代 码 会 在 当前 页 面 的 上 
下 文 环境 中 运行 ， 所 以 ， 如 有 果 您 在 其 中 输入 location.href， 控 制 台 就 会 
返回 当前 页 面 的 URL。 除 此 之 外 ， 该 控制 台 还 具有 一 套 目 动 完 成 功 
能 ， 其 工作 方式 与 我 们 平时 所 用 的 操作 系统 命令 行 类 似 。 举 个 例子 ， 
如 果 我 们 在 其 中 输入 docu， 然 后 按 Tab 键 ，docu 就 会 彼 目 动 补 全 为 
document。 这 时 如 果 再 继续 输入 一 个 “.” (点 操作 符 ) ， 我 们 就 可 以 通 


过 重复 按 Tab 键 的 方式 来 遍历 document 对 象 中 所 有 可 调用 的 方法 和 属 
人 


EIES http:/ /www.google.com/ 


Web Images Videos Maps News Shopping Gmail more~ Sign in 党 


Advanced search 
Language tools 


Google Search | 1m Feeling Lucky 


[All ) | Errors Warnings Logs 
> var img = document. images[1]; 
undefined 
> img.src = "http://www,.packtpub.com/sites/default/files/bookimages/1847194141. jpg" 
ehttp: //wuW.packtpub. com/sites/default/files/bookimages/1847194141. jpg" 
》 img.width = 130 
138 
> img.style.height = "auto" 
" 可 


图 1-1 
另外 通过 上 下 箭头 键 ， 我 们 还 可 以 随时 从 相关 列表 中 找 回 已 经 执 
人 令 ， 并 在 控制 台中 重新 执行 它们 。 
通常 情况 下 ， 控 制 台 只 提供 单行 输入 ， 但 我 们 可 以 用 分 号 做 分 割 
从 来 执行 多 个 JavaScript 语 句 。 而 如 果 您 需要 更 多 行 代 码 的 话 ， 也 可 以 
通过 组 合 键 shift+Enter 来 实现 换行 ， 在 这 种 情况 下 代码 不 会 被 立即 执 
= 


1.8.2 Mac 上 的 JavaScriptCore 


在 Mac 上 ， 我 们 事实 上 不 用 浏 唤 絮 也 可 以 通过 终端 来 执行 
JavaScript ° 

如 果 您 之 前 没有 使 用 过 终 逆 ， 可 以 通过 Spotlight 找 到 它 。 打 开 终 喘 
之 后 ， 在 其 中 输入 : 


alias 


jsc="/System/Library/Frameworks/JavaScriptCore.framework/Versions/Curr 
ent/Resources/jsc 

该 命令 为 JSC ( 即 JavaScriptCore) 设置 了 一 个 别名 。JSC 其 实 是 
WebKit 引 警 的 一 部 分 。Mac 系 统 自 带 有 该 引擎 。 

我 们 也 可 以 直接 将 这 个 alias 命 令 放 入 一 /profile 文 件 ， 这 样 每 次 打 
开 终 端 时 ， 都 可 以 通过 jsc 这 个 别名 来 启动 JavaScriptCore 了 。 

现在 ， 终 端 在 任何 目 永 下 都 可 以 通过 直接 输入 jsc 来 打开 其 交互 环 
境 了 。 然 后 您 可 以 在 其 中 输入 相关 的 JavaScript 表达 式 。 按 下 Enter 键 
之 后 ， 表 达 式 的 结 末 殉 会 被 显示 出 来 ， 如 图 1-2 所 示 。 


[有 Terminal — jsc — 80x24 


Last login: Tue May 31 81:87:35 on ttys0802 


stoyanstefanov:~ stoyanstefanov$ jsc 
> 1+1 

2 

> Var a = “hello”; 

undefined 

> a 

hello 

> var b = "console"; 

undefined 


hello console 
> 


1.8.3 台 


如 今 ， 几 乎 所 有 现代 浏 哎 右 部 有 目 市 的 控制 台 。 除 了 之 前 提 人 到 的 
Chrome 及 Safari 的 控制 台 之 外 ，FireFox 浏 览 器 的 所 有 版 本 也 都 能 安装 
Firebug 组 件 ， 该 组 件 中 也 有 一 个 控制 台 。 男 外 ， 新 版 的 Firefox 中 也 有 
一 个 目 市 的 控制 人 台 ， 您 可 以 通过 有 亲 单 位 “工具 /Web 开 发 者 /Web 控 制 台 ” 
来 打开 它 ， 如 图 1-3 所 示 。 


Google 
| 9 | Coogle Wd 区 
huap://www.google.com vC|[@! QQ 会 | | 四 > 
x (BNet ») (BCSS ") (BJS ») (Web Developer Position | Clear | 
document 
[obiect HTMLDocument] 
10:50:40.220 document .title 
"Google" 
> 
Web Images Videos Maps News Shopping Gmail more - Sign in 从 | 
J pa 1 Es " 
SF 


图 1-3 


而 Internet Explorer 从 第 8 版 开始 ， 只 要 按 下 F12 键 束 可 以 打开 开发 


者 工具 组 件 。 打 开 后 ， 按 Script 标 签 栏 就 可 进入 控制 台 。 


另外 ， 通 过 Node.js 的 交互 环境 来 学 习 JavaScript 也 是 一 个 不 错 的 
选择 。 您 可 以 从 http://nodejs.org 中 获取 并 安装 Node.js， 然 后 在 终端 中 尝 


试 其 控制 台 ， 如 图 1-4 所 示 。 


众 stoyanstefanov 一 bash 一 79x21 


stoyanstefmbpl15:~ stoyanstefanov$ node 
> var a = 1; var b = 2; 


(^C again to quit) 

> 

stoyanstefmbp15:~ stoyanstefanov$ cat test.]js 
var a = 101; 


var b = 202; 


console.log(a + b); 

stoyanstefmbpl5:~ stoyanstefanovs$ node test.]js 
383 

stoyanstefmbp15:~ stoyanstefanov$ 力 


图 1-4 
如 您 所 见 ， 我 们 既 可 以 用 Node.js 的 控制 台 测 试 一 些小 型 示例 ， 同 
时 也 可 以 写 一 些 较 长 的 shell 脚 本 (如 截图 中 的 testjs) ， 然 后 以 
scriptname.js 的 形式 在 Node.js 的 终端 中 执行 。 


1.9 小 结 


在 这 一 章 中 ， 我 们 首先 介绍 了 JavaScript 语言 的 发 展 历程 和 现状 。 
然后 ， 对 面向 对 象 程序 设计 的 概念 进行 了 一 些 基本 论述 。 接 着 ， 我 们 
癌 您 详细 阐述 了 为 什么 JavaScript 不 是 传统 的 基于 类 的 面向 对 象 语 言 ， 
而 是 一 套 独 特 的 原型 系统 。 现 在 ， 您 已 经 为 下 一 步 深 入 学 习 JavaScript 
语言 、 掌 握 其 面 同 对 象 特性 打下 了 一 定 的 基础 ， 但 让 我 们 一 步 步 来 。 

下 一 章 将 会 介 召 JavaScript 的 数据 类 型 es 
少 ) ， 以 及 条 件 、 循 环 语句 和 数组 。 如 有 条 您 确信 自己 已 经 掌握 了 


知识 ， 并 且 对 该 章 结尾 处 的 那儿 个 小 练习 完全 没有 疑问 的 话 ， 那 么 就 


请 自行 跳 过 这 一 章 吧 。 


jj 、 
组 、 和 、 了 


在 深入 学 习 JavaScript 的 面向 对 象 特 性 之 前 ， 我 们 站 先 要 了 解 一 些 
基础 性 知识 。 在 这 一 章 中 ， 我 们 将 会 从 以 下 几 个 方面 入 手 。 

JavaScript 中 的 基本 数据 类 型 ， 例 如 字符 串 和 数字 等 

数组 。 

常用 探 作 符 ， 例 如 +、-、delete、typeof 等 。 

控制 流 语 句 ， 例 如 循环 和 if-else 条 件 表达 式 等 。 


2.1 变量 


通常 ， 变 量 都 是 用 来 存储 数据 的 ， 即 它 是 存放 具体 数值 的 容器 。 
当 我 们 编写 程序 时 ， 用 变量 来 表示 实际 数据 会 更 方便 些 。 尤 其 是 当 我 
们 需要 多 次 使 用 某 个 数字 时 ， 使 用 变量 pi 显然 要 比 直 接 写 数字 值 
3.141592653589793 方 便 得 多 。 而 且 ， 之 所 以 称 它 们 为 “ 变 * 量 ， 就 是 因 
为 它们 所 存储 的 数据 在 初始 化 之 后 仍然 是 可 以 改变 的 。 另 外 ， 在 编写 
代码 时 我 们 往往 也 可 以 用 变量 来 代表 某 些 程序 运行 前 还 未 知 的 数据 ， 
例如 某 个 计算 的 结果 值 。 

变量 的 使 用 通常 可 分 为 以 下 两 个 步骤 。 

声明 变量 。 
初始 化 变量 ， 即 给 它 一 个 初始 值 。 


我 们 可 以 使 用 var 语 句 来 声明 变量 ， 像 这 样 : 
Var a; 
var thisISAVariable; 
var _and this_ too; 
var mix12three; 
量 名 可 以 由 字母 、 数 字 、 下 划 线 及 美元 符号 组 合 而 成 。 但 不 能 
以 数字 开关 像 下 面 这 样 是 不 被 允许 的 : 
var 2three4five; 
而 所 谓 的 变量 初始 化 ， 实 际 上 指 的 是 变量 的 第 一 次 赋值 。 我 们 可 
以 有 以 下 两 种 选择 。 
完 声明 变量 ， 然 后 再 初始 化 。 
声明 变量 与 初始 化 同 步 进 行 。 
下 面 是 后 一 种 写法 的 例子 : 
vara=1; 
这 样 ， 我 们 束 声 明了 一 个 名 为 a、 值 为 1 的 变量 
男 外 ， 我 们 也 可 以 在 单个 var 语句 中 同时 声明 (并 初始 从 ) 和 人 小 室 
量 ， 只 要 将 它们 分 别 用 逗号 分 开 妈 可， 例如: 
var v1, v2, v3 = 'hello', v4 = 42, v5; 
有 时 候 出 于 代码 可 读 性 方面 的 考虑 ， 我 们 可 能 还 会 这 人 么 写 : 
Var v1, 
V2， 
v3 = 'hello,, 
v4 = 42, 
V5; 
变量 名 中 的 $ 从 号 
变量 名 中 可 以 使 用 $ 符 号 ， 例 如 $myvar， 或 者 品味 还 可 以 更 独特 一 
点 ，my$var。 按 照 变量 命名 规范 ， 美 元 符号 允许 出 现在 任意 位 置 ， 但 


其 实 旧 版 的 ECMA 标 准 是 不 鼓励 使 用 美元 符号 命名 变量 的 ， 它 只 建议 
在 生成 代码 ( 即 由 其 他 程序 输出 的 代码 ) 中 使 用 。 但 显然 JavaScript 社 
区 并 没有 接受 该 建议 ， 在 实际 项 目 中 ， 以 单独 一 个 $ 符 为 函数 名 的 做 法 
比比 千夫 3 

区 分 大 小 写 

在 JavaScript 语 言 中 ， 变 量 名 是 区 分 大 小 写 的 。 为 了 证 明 这 一 点 ， 
我 们 可 以 在 JavaScript 控 制 台中 测试 下 列 语句 (每 输入 一 行 按 一 次 Enter 
键 ) : 

Var case_matters = lower ; 

var CASE MATTERS = "upper ; 

case_matters; 

CASE MATTERS; 

为 了 减少 按键 的 次 数 ， 在 输入 第 三 行 时 ， 我 们 可 以 多 键入 ca 然后 
按 Tab 键 (或 右 方向 键 ) ， 控 制 台 会 自动 将 其 补 全 为 case_matters。 最 后 
一 行 也 是 如 此 ， 我 们 只 需 先 输入 CASE 然 后 直接 按 Tab 即 可 。 输 入 完成 
之 后 ， 最 终结 末 如 图 2-1 所 示 。 

为 方便 起 见 ， 以 后 我 们 将 用 代码 形式 来 代 车 截图。 上面 的 例子 可 
以 表示 如 下 : 

> var case_matters = 1]ower'; 

> var CASE MATTERS = "upper'; 


> case_matters,; 


"lower" 

> CASE MATTERS: 

"upper" 

如 您 所 见 ， 大 于 号 (>) 之 后 的 内 容 就 是 我 们 输入 的 代码 ， 而 其 余 
部 分 则 是 控制 台 输 出 的 结果 。 需 要 强调 的 是 ， 当 您 测试 类 似 的 代码 


时 ， 应 该 根据 实验 的 实际 情况 来 调整 相关 代码 。 这 才能 有 助 于 您 更 好 
地 理解 语言 的 工作 方式 。 
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var case_matters = '\lower'; 


图 2-1 

读者 有 时 可 能 会 看 到 某 个 表达 式 在 控制 台中 的 输出 结 采 为 
undefined。 这 大 多 数 情况 下 是 完全 可 以 忽略 的 ， 但 您 有 没有 想 过 ， 为 
什么 这 些 表 达 式 会 输出 undefined 呢 ? 那 是 因为 控制 台 在 执行 完 我 们 输 
入 的 表达 式 之 后 ， 总 是 要 输出 该 表达 式 的 运行 结果 。 但 有 一 些 表达 式 
(例如 vara = 1;) 是 没有 任何 返回 值 的 。 在 这 种 情况 下 ， 控 制 台 就 会 隐 
式 打 印 一 个 undefined。 相 反 地 ， 当 一 个 表达 式 确实 有 返回 值 时 ， 比 如 
之 前 的 例子 中 的 case_matters 或 是 1+1 之 类 的 表达 式 ， 控 制 台 就 会 将 该 表 
达 式 的 实际 返回 值 打印 出 来 。 当 然 ， 并 不 是 所 有 的 控制 台 都 会 在 没有 

返回 值 时 打印 undefined 值 ， 例 如 Firebug 控 制 台 就 不 会 这 样 做 。 


所 谓 操 作 符 ， 通 常 指 的 是 能 对 一 两 个 输入 执行 某 种 操作 ， 并 返回 
结果 的 符号 。 为 了 更 清晰 地 表达 该 术语 的 含义 ， 我 们 先 来 看 一 个 具体 
的 示例 : 

> 工 +2; 

3 

这 段 代 码 包含 了 以 下 几 点 信息 。 

+ 是 一 个 操作 符 。 

该 操作 是 一 次 加 法 运算 。 

输入 值 为 1 和 2 (输入 值 也 叫做 操作 数 ) 。 

结果 值 为 3。 

1+2 这 个 整体 称 为 表达 式 。 

在 这 里 ，1 和 2 都 是 直接 参与 加 法 运算 的 。 接 下 来 我 们 要 将 它们 换 
成 变量 ， 并 再 另外 声明 一 个 变量 来 存储 运算 结果 。 具 体 如 下 : 


> vara= 1; 


> var b = 2; 
>a+t+1; 

2 

>b+2; 

4 

>a+t+b:; 

3 
>vVvarc=a+b; 
> C， 

3 

在 表 2-1 中 ， 我 们 列 出 了 一 些 基 本 的 算术 运算 符 。 


表 2: 
操作 符 相关 操作 代码 示例 


>1+ 2; 


加 法 运算 


操作 符 相关 操作 


% 


二 


| 
re 
Er 


取 横 运算 ， 即 求 除法 运算 的 余数 


自 增 1 运算 


代码 示例 
= TR 
88.99 
流光 闪光 
6 


> 6 
1.5 
6 


取 模 运算 对 于 测试 一 个 整数 的 奇偶 性 很 有 用 处 ， 只 需 
要 让 该 数 对 2 执行 取 模 运 算 ， 返 回 1 的 便 是 奇数 ， 返 
回 0 则 都 为 偶数 


后 置 的 ++ 操 作 会 先 返回 该 值 ， 然 后 再 增 1 
> var a = 123; 

> var BD = Bt 

> 冰 汉 

123 

I 

124 

前 置 的 ++ 操 作 会 先 将 值 增 1， 然 后 再 返回 
> var a = 123; 

> Var b = ++a; 

和 3 

124 

世 外 衣 


124 


操作 符 


自 减 1 运算 


相关 操作 


后 置 的 一 一 操作 


> var a = 123; 


> var : = a= 


> 1; 
123 
> a; 
122 


前 置 的 一 一 操作 


> var a = 123; 


> Va Be a 


> 胸 光 
122 
> a; 


122 


代码 示例 


事实 上 ， 当 我 们 输入 var a = 1; 这 样 的 语句 时 ， 所 执行 的 也 是 一 种 独 
立 的 操作 。 这 种 操作 叫做 纯 赋 值 ， 因 而 “=” 也 被 称 为 简单 赋值 运算 符 


(simple assignment operator) 。 


除 此 之 外 ，JavaScript 中 还 有 一 组 由 算术 运算 和 赋值 操作 组 合 而 成 
的 操作 符 。 我 们 称 它 们 为 复合 操作 符 (compound operator) 。 这 些 操 作 
符 能 让 我 们 的 代码 显得 更 为 紧 煤 。 下 面 来 看 儿 个 示例 : 


>vara= 5; 


>a+= 3 


8 


在 该 例 中 ，a += 3; 实 际 上 就 相当 于 a = a + 3; 的 缩写 形式 。 


> a -= 3; 


5 


同 理 ， 这 里 的 a -= 3; 等 同 于 a =a-3;。 


以 此 类 推 : 

> a *= 2; 

10 

>a/=5; 

2 

> a %= 2; 

0 

除了 我 们 已 经 提 到 的 算术 运算 与 赋值 操作 以 外 ，JavaScript 中 还 有 
其 他 各 种 类 型 的 操作 符 。 我 们 将 会 在 后 面 的 章节 中 陆续 看 到 。 

最 佳 实践 

表达 式 应 始终 是 以 分 号 为 结束 符 的 。 尽 管 JavaScript 本 号 设 有 分 号 
补 全 机 制 ， 即 如 打 您 系 了 在 一 行 表 达 式 之 后 添加 分 号 ， 该 位 置 殉 会 被 
隐 式 地 补 上 一 个 分 号 。 但 这 种 机 制 同 时 也 是 出 错 的 主要 源头 之 一 。 所 
以 ， 最 好 还 是 我 们 目 己 要 记得 在 表达 式 结 束 之 后 明确 地 用 分 号 来 天 闭 
该 表达 式 。 换 句 话 说， 虽然 >1+1 与 >1+1; 都 属于 合法 的 表达 式 ， 但 
为 了 强调 这 一 民 好 的 编程 习惯 ， 本 书 将 一 律 采 用 后 一 种 形式 。 


2.3 基 型 


我 们 在 程序 中 所 使 用 的 任何 值 都 是 有 类 型 的 。JavaScript 仅 有 以 下 
儿 大 基本 数据 类 型 。 

1， 数字 一 一 包括 浮 点 数 与 整数 ， 例 如 这 些 都 属于 数字 : 1、100、 
3.14° 

2. 字符 串 一 一 包括 由 任意 数量 字符 组 成 的 序列 ， 例 
如 : "a"、 "one" 、 "one 2 three" 。 

3. 布尔 值 一 包括 true 和 false。 


4. undefined 一 一 当 我 们 试图 访问 一 个 不 存在 的 变量 时 ， 就 会 得 到 
一 个 特殊 值 : undefined。 除 此 之 外 ， 使 用 已 声明 却 未 赋值 的 变量 也 会 
如 此 。 因 为 JavaScript 会 目 动 将 变量 在 初始 化 之 前 的 值 设 定 为 
undefined。 而 undefined 类 型 的 值 只 有 一 个 一 undefined 。 

5. null 是 男 一 种 只 包含 一 个 值 的 特殊 数据 类 型 。 所 谓 的 null 
值 ， pe 值 或 空 值 ， 不 代表 任何 东西 。null 与 ndefined 最 大 的 
a 被 赋 了 予 null 的 变量 通常 被 认为 是 已 经 定义 了 的 ， 只 不 过 它 不 
代表 任何 东西 。 关 于 这 一 点 ， 我 们 稍 后 会 通过 一 些 具 体 的 示例 来 解 
释 。 


ee nn 甚至 
有 时 候 我 们 也 会 将 null 视 为 对 象 ， 这 是 一 个 不 代 
表 任 何 东西 的 对 象 《东西 ) 。 我 们 将 会 es 
的 概念 ， 现 在 我 们 只 需要 记 住 一 点 ，JavaScript 中 的 数据 类 型 主要 分 为 
以 下 两 个 部 分 : 

基本 类 型 (上 面 列 出 的 五 种 类 型 ) 。 

非 基本 类 型 ( 即 对 象 ，。 


jy 


如 果 我 们 想 知 道 某 个 变量 或 值 的 类 型 是 什么 ， 可 以 调用 特殊 操作 
从 typeof 。 该 操作 符 会 返回 一 个 代表 数据 类 型 的 字符 串 ， 以 下 是 其 可 能 
返回 的 结果 : 

"number"; 

"string"; 

"boolean"; 

"undefined"; 


"object"; 


"function" ° 
在 接 下 来 的 几 广 中 ， 我 们 将 会 在 例子 中 未 一 对 五 种 基本 数据 类 型 
使 用 typeof 操 作 。 


2.3.2 数字 


最 倍 单 的 数字 类 型 当然 就 是 整数 了 。 如 果 我 们 将 一 个 变量 赋值 为 
1， 并 对 其 调用 typeof 操 作 符 ， 控 制 台 束 会 返回 字符 串 "number": 

>varn=1; 

> typeof Di; 

"number" 

> n= 1234; 

> typeof n; 

"number" 

该 例 中 有 一 点 值得 注意 ， 即 当 您 第 二 次 设置 某 变 量 的 值 时 ， 就 无 
需 再 用 到 var 语 句 了 。 

浮 点 数 ( 即 仿 小数 部 分 的 数字 ) 显然 也 是 Number 类 型 的 一 种 : 


> var n2 = 1.23; 


> typeof n2; 轩 
"number" 
当然 ， 我 们 也 可 以 直接 对 一 个 数值 调用 typeof， 并 非 一 定 得 要 事先 


将 其 赋值 给 变量 。 


> typeof 123; 
"number" 
2.3.2.1 八进制 与 十 六 进 制 


当 一 个 数字 以 0 开头 时 ， 束 表示 这 是 一 个 八进制 数 。 例 如 ， 八 进 制 
数 0377 所 代表 的 就 是 十 进 制 数 255。 


> var n3 = 0377; 
> typeof n3; 
"number" 
> n3; 
255 
如 您 所 见 ， 例 子 中 最 后 一 行 所 输出 的 就 是 该 八进制 数 的 十 进 制 表 
3 
或 许 您 对 八进制 数 还 不 太 熟 悉 ， 但 十 六 进 制 您 应 该 不 会 感到 陌 
生 ， 因 为 CSS 样式 表 中 的 颜色 值 在 大 多 数 情况 下 就 是 用 十 六 进 制定 义 
的 。 
在 CSS 中 ， 我 们 有 好 几 种 方式 定义 颜色 ， 其 中 的 两 种 如 下 所 示 。 
使 用 十 进 制 数 分 别 指定 R ( 红 ) 、G ( 绿 ) 、B 〈 蓝 ) 的 值 四， 到 
值 范 围 都 为 0 一 255。 例 如 rgb(0,0,0) 代 表 黑 色 、rgb(255,0,0) 代 表 红 色 
( 红 值 达到 最 大 值 ， 而 绿 和 蓝 都 为 0 值 )。 
使 用 十 六 进 制 数 ， 两 个 数位 代表 一 种 色 值 ， 依 次 是 R、G、B。 例 
如 #000000 代表 黑色 、#ff0000 代 表 红 色 ， 因 为 十 六 进 制 的 任 束 等 于 
255° 
在 JavaScript 中 ， 我 们 会 用 0x 前 级 来 表示 一 个 十 六 进 制 值 
(hexadecimal value， 简 称 为 hex) 。 


> var n4 = 0X00; 


> typeof n4; 
"number" 

> n4; 

0 

> var n5 = Oxff; 
> typeof ns5; 


"number" 


> DD; 
255 
2.3.2.2 指数 表示 法 
一 个 数字 可 以 表示 成 lel (或 者 le+1、1E1、1E+1) 这 样 的 指数 形 
意思 是 在 数字 1 后 面 加 1 个 0， 也 就 是 10。 同 理 ，2e+3 的 意思 是 在 数 
2 后 面 加 3 个 0， 也 就 是 2000。 

> lel; 

10 

> let+1; 

10 

> 2e+3; 

2000 

> typeof 2e+3; 


J 


"number" 
此 外 ， 我 们 也 可 以 将 2e+3 理解 为 将 数字 2 的 小 数 点 同 右 移 三 位 。 
依照 同 理 ，2e-3 也 允 能 被 理解 是 将 数字 2 的 小 数 点 左 移 三 位 。 
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> 2e-3; 
0.002 
> 123.456E-3; 


0.123456 


> typeof 2e-3; 

"number" 

2.3.2.3 Infinity 

在 JavaScript 中 ， 还 有 一 种 叫做 Infinity 的 特殊 值 。 它 所 代表 的 是 超 
出 了 JavaScript 处 理 范围 的 数值 。 但 Infinity 依然 是 一 个 数字 ， 我 们 可 以 
在 控制 台 使 用 typeof 来 测试 Infinity。 当 我 们 输入 1e308 时 ， 一 切 正常 ， 
但 一 旦 将 后 面 的 308 改 成 309 束 出 界 了 。 实 践 证 明 ，JavaScript 所 能 处 理 
的 最 大 值 是 1.7976931348623157e+308， 而 最 小 值 为 5e-324 。 

> Infinity; 

Infinity 

> typeof Infinity; 

"number" 

> le309,; 

Infinity 

> le308,; 

le+308 

另外， 任何 数 除 以 0 结果 也 为 Infinity: 

>vara=6/0; 

>a: 

Infinity 

Infinity 表 示 的 是 最 大 数 (或 者 比 最 大 数 还 要 大 的 数 ) ， 那 么 最 小 
数 该 如 何 表 示 呢 ? 管 案 是 在 Infinity 之 前 加 一 个 负 号 : 

> var i = -Infinity; 

>1; 

-Infinity 

> typeof i; 


"number" 


这 是 不 是 意味 着 我 们 可 以 得 到 双 倍 的 Infinity 呢 ? 一 一 毕竟 我 们 可 
以 从 0 加 到 Infinity， 也 可 以 从 0 减 到 -Infinity。 事 实 上 这 是 不 可 能 的 ， 因 
为 即便 将 正人 负 Infinity 相 加 ， 我 们 也 不 会 得 到 0， 而 是 会 得 到 一 个 叫做 
NaN (Not A Number 的 缩写 ， 即 不 是 数字 ) 的 东西 。 

> Infinity - Infinity; 

NaN 

> -Infinity + Infinity; 

NaN 

另外 ，Infinity 与 其 他 任何 操作 数 执行 任何 算术 运算 的 结果 也 都 等 
于 Infinity。 

> Infinity - 20; 


Infinity 

> -Infinity * 3; 

-Infinity 

> Infinity / 2; 

Infinity 

> Infinity ~ 99999999999999999; 

Infinity 

2.3.2.4 NaN 

还 记得 之 前 见 过 的 那个 NaN 吗 ? 尽管 该 值 的 名 字 叫 做 “不 是 数 
， 但 事实 上 它 依然 属于 数字 类 型 ， 只 不 过 是 一 种 特殊 的 数 子 轻 了 。 

> typeof NaN; 


! 


"number" 
> var a = NaN; 
> ad; 


NaN 


如 采 我 们 在 算术 运算 中 使 用 了 不 恰当 的 的 操作 数 ， 导 致 运算 失 
败 ， 该 运算 束 会 返回 NaN。 例 如 当 我 们 试图 让 数字 10 与 字符 "f" 相 乘 
时 ， 结 果 就 会 为 NaN， 因 为 "f" 显 然 是 不 文 持 乘法 运算 的 。 


> vara= 10 * "f"; 


> al 

NaN 

而 且 NaN 和 是 有 传染 性 的 ， 只 要 我 们 的 算术 运算 中 存在 一 个 NaN， 整 
个 运算 束 会 失败 。 

>1+2+NaN; 

NaN 


2.3.3 字符 串 


字符 串通 常 指 的 是 某 段 用 于 表示 文本 的 字符 序列 。 在 JavaScript 
中 ， 一 对 双 引 号 或 单 引 号 之 间 的 任何 值 都 会 被 视 为 一 个 字符 串 。 也 惑 
是 说 ， 如 果 说 1 是 一 个 数字 的 话 ， 那 么 "1" 了 驶 是 一 个 字符 串 了 。 在 一 个 字 
符 串 前 使 用 typeof 操 作 符 会 返回 "string"。 

> var s = "some characters"; 

> typeof s; 

"string" 

> var s = 'some characters and numbers 123 5.87'; 

> typeof s; 

"string" 

字符 串 中 可 以 包含 数字 ， 例 如 : 

>vars='1'; 

> typeof s; 


"string" 


如 果 引 号 之 间 没 有 任何 东西 ， 它 所 表示 的 依然 是 一 个 字符 串 ( 即 
空 字符 串 ) : 

> var s = ""; typeof s; 

"string" 

在 上 一 小 节 ， 当 我 们 在 两 个 数字 之 间 使 用 加 号 时 ， 所 执行 的 是 加 
法 运算 。 但 在 字符 串 中 ， 这 是 一 个 字符 串 拼 接 操 作 ， 它 返回 的 是 两 个 
字符 捉 拼 接 之 后 的 结果 。 例 如 : 


> var sl = "web"; 


> var S2 = "site"; 

> vars=sl+s2; 

>s: 

"website" 

> typeof s; 

"string" 

像 + 这 样 的 双 功 能 操作 符 可 能 会 市 来 一 些 错误 。 因 此 ， 我 们 如 果 想 
执行 拼接 操作 的 话 ， 最 好 确保 其 所 有 的 操作 数 都 是 字符 串 。 同 样 地 ， 
在 执行 数字 相 加 时 ， 我 们 也 要 确保 其 所 有 的 操作 数 都 是 数字 。 至 于 如 
何 做 到 这 一 点 ， 我 们 将 会 在 后 续 章 节 中 详细 讨论 。 

2.3.3.1 字符 串 转 换 

当 我 们 将 一 个 数字 字符 串 用 于 算术 运算 中 的 操作 数 时 ， 该 字符 串 
会 在 运算 中 被 当做 数字 类 型 来 使 用 。 (由 于 加 法 操作 符 的 歧义 性 ， 这 
条 规则 不 适用 于 加 法 运算 。) 

>vars='1" 


>s=3*s; 


> typeof s; 
"number" 


>S; 


3 

>vars='1'; 

> s++: 

> typeof s; 

"number" 

> S; 

2 

于 是 ， 将 数字 字符 串 转换 为 数字 束 有 了 一 种 偷懒 的 方法 : 
该 字符 串 与 1 相 乘 即 可 。 (当然 ， 更 好 的 选择 是 调用 parseInt() 范 
于 这 点 ， 我 们 将 会 在 下 一 章 中 介绍 。) 


> var s = "100";typeof s; 


"string" 

>s=s*1; 

100 

> typeof s; 

"number" 

如 果 转 换 操 作 失 败 了 ， 我 们 束 会 得 到 一 个 NaN 值 。 

> var movie = '101 dalmatians'; 

> movie * 1; 

NaN 

此 外 ， 将 其 他 类 型 转换 为 字符 串 也 有 一 种 偷懒 的 方法 ， 


听写 


ANT 


数 ， 


需 将 


天 


其 与 空 字符 串 相 加 即 可 : 
>varn=1; 
> typeof n; 
"number" 
>n="+n; 


i 


> typeof n; 

"string" 

2.3.3.2 特殊 字 符 串 

在 表 2-2 中 ， 我 们 列 出 了 一 些 具 有 特殊 含义 的 字符 串 。 
表 2-2 


\n 


\r 


\t 


\ 是 转 义 字符 
当 我 们 想 要 在 字符 串 中 使 用 引号 时 ， 就 
必须 对 它们 进行 转 义 ， 这 样 JavaScript 


才 不 会 将 其 认 作 字 符 串 的 终止 符 

同 理 ， 当 我 们 需要 在 字符 串 中 使 用 反 和 斜 
线 本 身 时 ， 也 需要 用 另 一 个 反 斜 线 对 其 
进行 转 义 


换行 符 


示例 


> var s = 'I don't know'; 


这 样 做 是 错误 的 ， 因 为 JavaScript 会 将 “I don” 
视 为 字符 串 ， 而 其 余部 分 则 将 会 被 视 为 无 效 代 
码 。 正 确 做 法 如 下 : 


> Var 8 = “I don\t XGO? 
> var s = I deon\'E Eneow, 
> Var s = "I don't know"; 
> var s = '"Hello", he said.'，; 
> var s = "\"Helleo\", he 
SST 07 

转 义 转 义 字符 本 身 : 
> Var 一 "TI\N2"; 总 ; 
wiI\2™ 
> var s = '\nl\n2\n3\n'; 
> s; 
1 
2 
3 

以 下 所 有 语句 : 


®>vars="'l\r2'; 
®>vars='l\n\r2'; 
®>vars='l\r\n2,, 


结果 都 为 : 


> Var 8 = "1\t2" 
> 
“1 人 


\u 


示例 


下 面 是 作者 的 名 字 在 保加利亚 语 中 用 西里 尔 字 
母 的 拼写 : 


\u 后 面 的 字符 将 会 被 视 为 Unicode 人 码 > "Nu0421N\u0442Nu043ENu044F 
\u043D"; 
"CTOoOAH" 


除 此 之 外 ， 还 有 一 些 很 少 被 使 用 的 特殊 字符 ， 例 如 : \b ( 退 格 
`\v (纵向 制 表 符 ，、Yf 〈( 换 页 符 ) 等 。 


2.3.4 布尔 


布尔 类 型 中 只 有 两 种 值 : true 和 false。 它 们 使 用 时 不 需 加 引号 。 
> Var b = true; 

> typeof b; 

"boolean" 

> var b = false; 

> typeof b; 

"boolean" 

如 果 true 或 false 在 引号 内 ， 它 就 是 一 个 字符 串 。 


> var b = "true"; 


> typeof b; 

"string" 

2.3.4.1 逻辑 运算 符 

JavaScript 中 有 三 种 逻辑 运算 符 ， 它 们 都 属于 布尔 运算 。 分 别 是 : 
逻辑 非 ( 取 反 ) ; 

&& 一 一 逻辑 与 ; 

| 一 逻辑 或 。 


! 


在 JavaScript 中 ， 如 采 我 们 想 描述 某 事物 的 非 真 状态 ， 束 可 以 考虑 
使 用 逻辑 非 运算 符 : 

> var b = !true; 

> b; 

false 


而 如 采 我 们 对 true 执 行 两 次 逻辑 非 运 算 的 话 ， 其 结果 应 该 束 等 于 原 


值 : 

> var b = !ltrue; 

> b; 

true 

如 果 我 们 对 一 个 非 布 尔 值 执行 逻辑 运算 ， 那 么 该 值 束 会 在 计算 过 
程 中 被 转换 为 布尔 值 : 

> var b = "one"; 

> !b; 

false 


如 您 所 见 ， 上 例 中 的 字符 串 "one" 是 先 被 转换 为 布尔 值 true 然后 再 
取 反 的 ， 结 果 为 false。 如 有 果 我 们 对 它 取 反 两 次 ， 结 果 就 会 为 tue。 例 
如 : 

> var b = "one"; 

> !!Ib:; 

true 

音 助 双重 取 反 操作 ， 我 们 可 以 很 轻易 地 将 任何 值 转换 为 相应 的 布 
尔 值 。 理 解 各 种 类 型 的 值 转换 为 相应 布尔 值 的 规则 非常 重要 。 除 了 下 
面 所 列 出 特定 值 以 外 〈 它 们 将 被 转换 为 false) ， 其 余 大 部 分 值 在 转换 
为 布尔 值 时 都 为 true 。 

空 学 符 串 ""。 


null ° 


undefined 。 

数字 0。 

数字 NaN。 

布尔 值 false。 

这 6 个 值 有 时 也 会 被 我 们 称 为 falsy 值 ， 而 其 他 值 则 被 称 为 truthy 值 

(包括 字符 串 "0"、""、"false" 等 ) 

接 下 来 ， 让 我 们 来 看 看 另外 两 个 操作 符 一 一 逻辑 与 (&&) 和 人 逻辑 
或 〈 的 使 用 示例 。 当 我 们 使 用 && 操 作 符 时 ， 当 且 仅 当 该 操作 所 有 
操作 数 为 true 时 ， 操 作 结果 才 为 true。 而 | 操作 则 只 需要 其 中 一 个 操作 数 
为 tue， 操 作 结 果 即 为 true。 


> var b1 = true, b2 = false:; 


> bl || b2; 

true 

> bl && b2; 

false 

在 表 2-3 中 ， 我 们 列 出 了 所 有 可 能 的 情况 及 其 相应 结果 。 

表 2-3 
操作 结果 

true && true true 
true && false false 
false && true false 
false && false false 
true || true true 
true || false true 
false || true true 
false || false false 


当然 ， 我 们 也 能 连续 执行 若干 个 逻辑 操作 。 例 如 : 


> true && true && false && true; 

false 

> false || true || false; 

true 

我 们 还 可 以 在 同一 个 表达 式 中 混合 使 用 && 和 ||。 不 过 在 这 种 情况 
下 ， 最 好 用 括号 来 明确 一 下 操作 顺序 。 例 如 : 

> false && false || true && true; 

true 

> false && (false || true) &g& true; 

false 

2.3.4.2 操作 符 优先 级 

您 可 能 会 想 知道 ， es md (false && false || 
true &&true) 结果 为 true。 答案 在 于 操作 符 优先 级 。 这 看 上 去 有 点 像 数 
学 ， 例 如 : 

之 让 :中 汉 汪 局 ， 


7 
由 于 乘法 运算 的 优先 级 高 于 加 法 ， 所 以 该 表达 式 会 先 计 算 2 * 3， 
这 束 相 当 于 我 们 输入 的 表达 式 是 : 


>1+(2*3); 

7 

逻辑 运算 符 也 一 样 ，! 的 优先 级 最 高 ， 因 此 在 没有 括号 限定 的 情 
况 下 它 将 会 被 最 先 执 行 。 接 下 来 的 优先 | 顺序 是 && 最 后 才 是 上 |。 也 就 
是 说 : 

> false && false || true && true; 

true 

与 下 面 表 达 式 等 效 : 


> (false && false) || (true && true); 


true 

最 佳 实践 : 

尽量 使 用 括号 ， 而 不 是 依靠 操作 符 优 先 级 来 设 定 代码 的 执行 顺 
序 ， 这 样 我 们 的 代码 才能 有 更 好 的 可 读 性 。 

尽管 ECMAScript 标准 的 确 对 运算 符 的 优先 级 做 了 相应 的 定义 ， 而 
且 记 住所 有 运算 符 的 优先 级 也 算是 一 种 很 好 的 脑力 练习 ， 但 本 书 并 不 
打算 提供 这 个 优先 级 列表 。 因 为 首先 ， 就 算 您 记 住 了 这 些 顺 序 ， 以 后 
也 有 可 能 会 瑟 记 。 其 次 ， 即 使 您 水 远 不 会 态 记 ， 您 也 不 应 该 依赖 它 ， 
因为 别人 不 一 定 会 记得 ， 这 样 做 会 给 他 们 的 代码 阅读 与 维 扩 市 来 困 
难 。 

2.3.4.3 惰性 求全 

如 果 在 一 个 连续 的 逻辑 操作 中 ， 操 作 结 有 果 在 最 后 一 个 操作 完成 之 
前 就 已 经 明确 了 的 话 ， 那 么 该 操作 往往 就 不 必 再 继续 执行 了 ， 因 为 这 
已 经 不 会 对 最 终结 果 产 生 任何 影响 。 例 如 ， 在 下 面 这 种 情况 中 : 

> true || false || true || false || true; 

true 

在 这 里 ， 所 有 的 逻辑 或 运算 符 优先 级 都 是 相同 的 ， 只 要 其 中 任何 
一 个 操作 数 为 tue， 该 表达 式 的 结果 就 为 tue。 因 而 当 第 一 个 操作 数 被 
求 值 之 后 ， 无 论 后 面 的 值 是 什么 ， 结 果 都 已 经 被 确定 了 。 于 是 我 们 可 
以 允许 JavaScript 引擎 偷 个 懒 (好 吧 ， 这 也 是 为 了 提高 效率 ) ， 在 不 影 
啊 最 终结 果 的 情况 下 省 略 一 些 不 必要 的 求 值 操作 。 为 此 ， 我 们 可 以 在 
控制 台中 做 个 实验 : 

> var b = 5; 

> true || (b = 6); 

true 

>b:; 

5 


> true && (b = 6); 

6 

> b; 

6 

除 此 之 外 ， 上 面 的 例子 还 同 我 们 显示 了 男 一 个 有 趣 的 事情 一 一 如 
果 JavaScript 引擎 在 一 个 逻辑 表达 式 中 遇 到 一 个 非 布 尔 类 型 的 操作 数 ， 
那么 该 操作 数 的 值 就 会 成 为 该 表达 式 所 返回 的 结 有 末 。 例 如 : 

> true || "something " ; 

true 

> true && "something"; 

"something" 

> true && something && true; 

true 

通常 情况 下 ， 这 种 行为 应 该 尽量 避免 ， 因 为 它 会 使 我 们 的 代码 变 
得 难以 理解 。 但 在 某 些 时 候 这 样 做 也 是 有 用 的 。 例 如 ， 当 我 们 不 能 确 
定 某 个 变量 是 否 已 经 被 定 义 时 ， 束 可 以 像 下 面 这 样 ， 即 如 果 变 量 
mynumber 已 经 被 定 义 了 ， 束 保留 其 原 有 值 ， 否 则 就 将 它 初 始 化 为 10 。 


> var mynumber = mynumber || 10; 


> mynumber; 

10 

这 种 做 法 简单 而 优雅 ， 但 是 请 注意 ， 这 也 不 是 绝对 安全 的 。 如 果 
这 里 的 mynumber 之 前 被 初始 化 为 0 〈 或 者 是 那 6 个 falsy 值 中 的 任何 一 
个 ) ， 这 段 代码 就 不 太 可 能 如 我 们 所 愿 了 。 

> Var mynumber = 0; 

> var mynumber = mynumber || 10; 

> mynumber; 

10 


2.3.4.4 比较 运算 符 

在 JavaScript 中 ， 还 有 另外 一 组 以 布尔 值 为 返回 值 类 型 的 操作 符 ， 
即 比较 操作 符 。 下 面 让 我 们 通过 表 2-4 来 了 解 一 下 它们 以 及 相关 的 示 
例 。 


表 2-4 
操作 符 操作 说 明 代码 示例 
相等 运算 符 ; 人 
true 
四 当 两 个 操作 数 相等 时 返回 true。 在 该 比较 操作 站 
执行 之 前 ， 两 边 的 操作 数 会 被 自动 转换 为 相同 false 
类 型 st 
true 
严格 相等 运算 符 : » 1 es== 117 
当 且 仅 当 两 个 操作 数 的 值 和 类 型 都 相同 时 返回 ga 
true。 这 种 比较 往往 更 可 靠 ， 因 为 其 幕后 不 存 1 一 = 1 
在 任何 形式 的 类 型 转换 ee 
bw 
不 相等 运算 符 : false 
[= 当 两 个 操作 数 不 相 等 时 返回 true (存在 类 型 转 ep 
false 
换 ) >1 1= 21; 
true 
严格 不 相等 运算 符 : > 1 !== 1; 
js 此 操作 内 不 允许 类 型 转换 。 且 当 两 个 操作 数 的 ER 
值 或 类 型 不 相等 时 返回 true 和 


操作 符 操作 说 明 代码 示例 


流 - 汗 流 六 2 
> 当 且 仅 当 左 操作 数 大 于 右 操作 数 时 返回 true faTae 
Sy 3 D2 
true 
加 当 且 仅 当 左 操作 数 大 于 或 等 于 右 操作 数 时 返回 > 1 >= 1 
true true 
芝 后- 受 二 
< 当 且 仅 当 左 操作 数 小 于 右 操作 数 时 返回 true 0 
true 
> 1 <= 1 
a 当 且 仅 当 左 操 作 数 小 于 或 等 于 右 操 作 数 时 返回 true 
true > 
true 
还 有 一 件 有 趣 的 事情 要 提醒 读者 注意 : NaN 不 等 于 任何 东西 ， 包 
括 它 目 己 。 
> NaN == NaN; 
false 


2.3.5 undefined 与 null 


当 我 们 演 试 使 用 一 个 不 存在 的 变量 时 ， 控 制 台 中 就 会 产生 以 下 错 
误 信 息 : 
> foo; 
ReferenceError: foo is not defined 
但 当 对 不 存在 的 变量 使 用 typeof 操 作 符 时 则 不 会 出 现 这 样 的 错误 ， 
是 会 返回 一 个 字符 串 "undefined"。 
> typeof foo; 


"undefined" 
如 果 我 们 在 声明 一 个 变量 时 没有 对 其 进行 赋值 ， 调 用 该 变量 时 并 
\ 会 出 钳 ， 但 typeof 操 作 符 依然 会 返回 "undefined'"': 


> Var somevar; 

> somevar; 

> typeof somevar; 

"undefined" 

这 是 因为 当 我 们 声明 而 不 初始 化 一 个 变量 时 ，JavaScript 会 目 动 使 
用 undefined 值 来 初始 化 这 个 变量 。 

> Var somevar; 

> somevar === undefined; 

true 

但 null 值 束 完 全 是 男 一 回 事 了 。 它 不 能 由 JavaScript 目 动 同 值 ， 只 能 
交 由 我 们 的 代码 来 完成 。 


> Var somevar = null; 


null 
> somevar; 
null 


> typeof somevar; 


"object" 
尽管 undefined 和 null 之 间 的 差别 微乎其微 ， 但 有 时 候 也 很 重要 。 例 
如 ， 当 我 们 对 其 分 别 执行 某 种 算术 运算 时 ， 结 果 就 会 截然 不 同 : 


> var i= 1 + undefined:; 

>i 

NaN 

> vari= 1 + null; 

>i 

1 

这 是 因为 null 和 undefined 在 被 园 换 为 其 他 基本 类 型 时 ， 方 法 存在 一 
定 的 区 别 ， 下 面 我 们 给 出 一 些 可 能 的 转换 类 型 。 


转换 成 数字 : 
>1*xundefined; 
NaN 

> 1 * null; 

0 

转换 成 布尔 值 : 

> !Iundefined; 
false 

> !Inulj; 

false 
转换 成 字符 串 : 

> "value: " + null; 
"value: null" 

> "value: " + undefined; 


"value: undefined" 


2.4 基本 数据 类 型 综述 


现在 ， 让 我 们 来 快速 汇总 一 下 目前 为 止 所 讨论 过 的 内 容 。 
JavaScript 语言 中 有 五 大 基本 数据 类 型 ; 

数字 ; 

字符 串 ; 

布尔 值 ; 


Undefined ; 


null ° 


任何 不 属于 基本 类 型 的 东西 都 属于 对 象 。 


数字 类 型 可 以 存储 的 数据 包括 : 正 负 整数 、 浮 点 数 、 十 六 进 制 数 


与 八进制 数 、 指 数 以 及 特殊 数值 NaN、Infinity、-Infinity。 


字符 串 类 型 存储 的 是 一 对 引号 之 间 的 所 有 字符 。 

布尔 类 型 的 值 只 有 两 个 : true 和 false 。 

null 类 型 的 值 只 有 一 个 : null。 

undefined 类 型 的 值 只 有 一 个 : undefined 。 

绝 大 部 分 值 在 转换 为 布尔 类 型 时 都 为 tue， 但 以 下 6 种 falsy 值 除 


2 


征 时 候 将 注意 力 转向 更 有 趣 的 数据 结构 


null 5 


Undefined ; 


2.5 数组 


现在 ， 我 们 对 JavaScript 中 的 基本 数据 类 型 已 经 有 了 一 定 的 了 解 ， 
数组 了 。 
那么 究竟 什么 是 数组 呢 ? 简 而 言 之 ， 它 就 是 一 个 用 于 存储 数据 的 


列表 。 与 一 次 只 能 存储 一 个 数据 的 变量 不 同 ， 我 们 可 以 用 数组 来 存储 


任意 数量 的 元 素 值 。 

我 们 可 以 用 一 对 不 带 任何 内 容 的 方 括号 来 声明 一 个 空 数组 变量 ， 
例如 : 

> var a = [j; 


如 采 我 们 想 要 定义 一 个 市 三 个 元 素 的 数组 ， 则 可 以 这 样 做 : 


> var a = [1,2,3]: 

只 要 在 控制 台中 输入 相应 的 数组 名 ， 束 能 打印 出 该 数组 中 的 所 有 
内 容 : 

>a: 

[1, 2, 3] 

现在 的 问题 是 ， 我 们 应 该 如 何 访问 数组 中 的 各 个 数据 元 素 呢 ? 通 
常 ， 元 素 在 数组 中 的 索引 位 置 (下 标 ) 是 从 0 开始 编号 的 。 也 就 是 说 ， 
数组 首 元 素 的 索引 值 (或 者 说 位 置 值 ) 应 该 是 9， 第 二 个 元 素 的 索引 值 
则 是 1， 以 此 类 推 。 表 2-5 中 所 显示 的 束 古 之 前 那个 三 元 素数 组 实例 中 的 
具体 情况 。 


为 了 访问 特定 的 数组 元 素 ， 我 们 需要 用 一 对 方 括号 来 指定 元 素 的 
索引 值 。 因 此 af[0] 所 访问 的 区 是 数组 a 的 惠 元 素 ， 而 a[1 则 代表 第 二 个 元 
素 ， 以 此 类 推 。 

> a[0]; 

1 

> alll; 

2 


2.5.1 增加 、 更 新 数组 元 素 


我 们 可 以 通过 索引 来 更 新 数组 中 的 元 素 。 例 如 在 下 面 的 代码 中 ， 
我 们 更 新 了 第 三 个 元 素 (索引 值 为 2) 的 值 ， 并 将 更 新 后 的 数组 打印 出 


> a[2] = three'; 

"three" 

>a; 

[1, 2, "three"] 

另外， 我 们 也 可 以 通过 索引 一 个 之 前 不 存在 的 位 置 ， 来 为 其 添加 
更 多 的 数组 元 素 。 


> a[3] = 'four'; 


"four" 

>a: 

[1, 2, "three", "four"| 

如 果 新 元 素 被 添加 的 位 置 与 原 数组 末端 之 间 存 在 一 定 的 间隔 ， 那 
么 这 之 间 的 元 系 将 会 被 目 动 设 定 为 undefined 值 。 例 如 : 

> var a = [1,2,3]; 

> a[6] = mew'; 

"new" 

> ai 


[1, 2, 3, undefined x 3, "new'"| 
2.5.2 删除 元 素 


为 了 删除 特定 的 元 素 ， 我 们 需要 用 到 delete 操 作 符 。 然 而 ， 相 关 元 
素 被 删除 后 ， 原 数组 的 长 度 并 不 会 受到 影响 。 从 某 种 意义 上 来 说 ， 该 
元 系 被 删除 的 位 置 只 是 被 留 空 了 而 已 。 

>vara=[1,2,3|]; 

> delete al 1 |]; 


true 


> 9; 
[1, undefined, 3] 
> typeof a[1I]; 


"undefined" 


2.5.3 数组 的 数组 
我 们 可 以 在 数组 中 存放 任何 类 型 的 值 ， 当 然 也 包括 另 一 个 数组 。 


>vVvara= [1, "two", false, null undefined]; 

> ai 

[1, "two", false, null undefined] 

> a[5] = [1,2,3]; 

[1, 2, 3] 

>a: 

[1, "two", false, null, undefined, Array[3]] 

如 有 果 我 们 用 鼠标 单 击 控制 台 内 结果 里 的 Array[3]， 这 个 数组 的 值 就 
会 钻 展 开 。 下 面 我 们 再 来 看 男 一 个 例子 ， 这 里 定义 了 一 个 含有 两 个 数 
组 的 数组 : 

> var a = [[1,2,3],[4,5,6]]; 

>a: 

LArray[3],Array[3] 

在 该 数组 中 ， 首 元 素 a[0] 本 映 也 是 一 个 数组 。 

> al0]; 

[1, 2, 3] 

所 以 如 果 想 要 访问 内 层 数组 中 的 特定 元 素 ， 我 们 就 得 要 再 加 一 组 
方 括 号 。 例 如 : 

> a[0][0]; 


1 

> al1][2]; 

6 

值得 注意 的 是 ， 我 们 也 可 以 通过 这 种 数组 访问 方式 来 获取 字符 串 
中 特定 位 置 上 的 字符 。 例 如 : 

> var s = 'One '; 

> S[0j]; 

"o" 
> sl1]; 


"nh 


> s[2}; 

nen 

尽管 用 数组 方式 访问 字符 串 在 很 人 前 丈 已 经 被 许多 浏览 辟 文 持 
(除了 旧版 本 的 还 ) ， 但 直到 ECMAScript 5 才 被 官方 正式 承认 为 标准 
的 一 部 分 。 

除 此 之 外 ， 数 组 的 使 用 方法 还 有 很 多 我们 将 会 在 第 4 章 : 对 象 中 
详细 介绍 ) ， 现 在 先 到 此 为 止 ， 请 记 住 以 下 内 容 。 

数组 是 一 种 数据 存储 形式 。 

数组 元 勾 是 可 以 被 索引 的 。 

数组 中 的 元 素 索 引 是 从 0 开始 的 ， 并 且 按 照 每 个 元 素 的 位 置 依次 递 


我 们 是 通过 方 括号 中 的 索引 值 来 访问 数组 元 系 的 。 
数组 能 存储 任何 类 型 的 数据 ， 包 括 男 一 个 数组 。 


2.0 SN = 


条 件 表达 式 是 一 种 简单 而 强大 的 控制 形式 ， 它 能 够 帮助 我 们 控制 
一 小 段 代 码 的 执行 走向 。 而 循环 则 是 一 种 可 以 让 我 们 重复 执行 某 段 代 
码 的 操作 。 接 下 来 ， 我 们 将 会 学 习 以 下 内 容 。 
if 条 件 表达 式 。 
switch 语 句 。 
while、do-while、for， 以 及 for-in 循环 。 

下 一 小 地 中 的 例子 需要 我 们 在 Firebug 欣 制 台中 打开 多 行 输入 功 
。 在 WebKit 控 制 台 中 ， 也 可 以 通过 Shift +Enter 来 输入 新 行 。 


让 我 们 先 来 看 一 个 简单 的 if 条 件 表达 式 : 


IO 
EE 


var result =", a= 3; 
if (a> 2){ 

result = 'a is greater than 2'; 
} 


如 您 所 见 ， 该 表达 式 通常 主要 由 以 下 几 个 部 分 组 成 : 

if 语 句 。 

括号 中 的 条 件 部 分 一 一 判断 “a 是 否 大 于 2”。 

被 包含 在 们 内 的 代码 块 ， 这 是 当 if 条 件 满足 时 该 程序 所 要 执行 的 部 


其 中 ， 条 件 部 分 〈 即 括号 内 的 部 分 ) 通 第 由 某 些 返回 布尔 值 的 操 
作 组 成 ， 主 要 有 以 下 几 种 形式 : 

逻辑 类 操作 ， 包 括 !、&& 、| 等 。 

比较 类 操作 ， 包 括 ===、!=、> 等 。 

一 个 可 以 转换 为 布尔 类 型 的 值 或 变量 。 

以 上 几 种 形式 的 组 合 。 


2.6.2 else 语 铝 


除 此 之 外 ，if 表达 式 中 还 可 以 有 一 个 可 选项 ， 即 else。 如 果 条 件 部 
分 的 表达 式 返 回 false 的 话 ， 我 们 也 可 以 执行 后 面 else 子 句 中 的 代码 块 。 
例如 : 


if (a> 2){ 

result = 'a is greater than 2'; 
} else { 

result = 'a is NOT greater than 2'; 
} 


而 且 ， 我 们 还 可 以 在 让 和 else 之 间 插 入 任意 个 else if 子 句 。 例 如 : 
if (a>2|a<-2){ 
result = 'a is not between -2 and 2 '; 
} else if (a === 0 && b === 0) { 
result = both a and b are zeros'; 
} else if (a === b) { 


result = 'a and b are equal'; 


} else { 

result = 'T give up'; 
} 
另外 ， 我 们 也 可 以 在 当前 的 让 代码 块 中 再 内 符 一 个 新 的 条 件 语 句 。 
if (a === 1) { 

if (b === 2) { 

result = 'ais 1 and b is 2'; 
} else { 


result = 'ais 1 but b is definitery not 2'; 


} else { 
result = 'a is not 1, no idea about b'; 


} 


2.6.3 代码 块 


在 前 几 个 例子 中 ， 我 们 实际 上 已 经 使 用 了 代码 块 。 首 先 ， 我 们 需 
要 和 多 了 解 一 下 什么 是 代码 块 ， 因 为 这 东西 在 条 件 表 达 式 和 循环 体 中 十 
随处 可 见 的 。 
所 谓 的 代码 块 ， 实 际 上 指 的 是 被 包括 在 大 括号 中 的 、 由 0 个 或 多 个 
表达 式 组 成 的 一 段 代码 。 
{ 
vara=1; 
varb = 3; 
} 
并 且 每 个 代码 块 中 都 还 可 以 再 内 骨 男 一 个 代码 块 : 
{ 


最 住 实践 : 

尽量 使 用 分 号 来 作为 每 一 行 的 线束。 尽管 这 在 语法 上 有 是 可 选 的 ， 
但 对 于 开发 来 说 是 一 个 很 好 的 习惯 。 为 了 让 代码 获得 最 佳 的 可 读 性 ， 
我 们 在 代码 块 中 的 表达 式 最 好 是 一 行 一 个 ， 并 用 分 号 彼此 隔 开 。 

尽量 对 代码 块 中 的 所 有 代码 使 用 缩 进 格式 。 有 些 人 会 用 Tab 来 做 
缩 进 ， 而 有 些 则 会 使 用 四 个 或 两 个 空格 。 这 都 无 关 紧 要 ， 只 要 保持 前 


尽量 使 用 大 括号 。 当 代码 块 中 只 有 一 个 表达 式 时 ， 大 括号 实际 上 
征 可 选 的 。 但 为 了 增加 代码 的 可 读 性 和 可 维护 性 ， 我 们 最 好 还 是 养 成 
加 大 括号 的 习惯 ， 即 使 这 不 是 必需 的 。 


2.6.4 检查 变量 是 否 存 在 


下 面 让 我 们 来 实际 使 用 一 下 条 件 语句 。if 表达 式 在 检查 一 个 变量 是 
否 存 在 时 往往 非常 有 用 。 其 中 ， 最 懒 的 方法 就 是 其 条 件 部 分 中 直接 使 
用 变量 ， 例 如 if(somevar){.…}。 但 这 样 做 并 不 一 定 是 最 合适 的 。 我 们 可 
以 来 测试 一 下 。 在 下 面 这 段 代 码 中 ， 我 们 将 会 检查 程序 中 是 否 存 在 一 
个 叫做 somevar 的 变量 ， 如 果 存 在 ， 就 将 变量 result 设 置 为 yes 。 


> Var result = "; 


> if (somevar){ 
result = 'yes'; 
} 
ReferenceError: somevar is not defined 


> result; 


这 段 代 码 显 然 是 起 作用 了 ， 因 为 最 终 的 结果 肯定 不 会 是 yes。 但 首 
先 ， 这 上 段 代 码 会 产生 一 个 警告 信息 : “somevar is not defined”， 作 为 一 
个 JavaScript 高 手 ， 您 肯定 不 会 希望 自己 的 代码 多 此 一 举 。 其 次 ， 就 算 
if(somevar) 返 回 的 是 false， 也 并 不 意味 着 somevar 束 一 定 没有 定义 ， 它 
也 可 以 是 任何 一 种 被 初始 化 为 falsy 值 (如 false 或 0) 的 已 声明 变量 。 

所 以 在 检查 变量 是 否 存在 时 ， 更 好 的 选择 是 使 用 typeof 。 


I 
3 


> var result = 


> if (typeof somevar !== "undefined"){ 
result = 'yes'; 

让 

> result; 


在 这 种 情况 下 ，typeof 返 回 的 是 一 个 字符 串 ， 这 样 就 可 以 与 字符 
串 "undefined" 进 行 直接 比 对 。 但 需要 注意 的 是 ， 如 有 果 这 里 的 somevar 是 
一 个 已 经 声明 但 尚未 赋值 的 变量 ， 结 有 果 也 是 相同 的 。 也 束 是 说 ， 我 们 
实际 上 是 在 用 typeof 测 试 一 个 变量 是 否 已 经 被 初始 化 (或 者 说 测试 变量 
值 是 否 为 undefined) 。 


> Var somevar,; 


> if (typeof somevar !== "undefined"){ 
result = 'yes'; 

} 

> result; 


> somevar = Undefined; 
> if (typeof somevar !== "undefined"){ 


result = 'yes'; 


> result; 


而 当 一 个 已 被 定义 的 变量 被 赋值 为 非 undefined 的 任何 值 后 ， 该 
量 的 typeof 结 果 束 不 再 是 undefined 了 。 


> somevar = 123; 


变 


> if (typeof somevar !== "undefined"){ 
result = 'yes';} 
> result; 
"yes" 
2.6.4.1 殖 代 计 表达 式 
如 果 我 们 所 面 对 的 条 件 表达 式 非 常人 简单 ， 束 可 以 考虑 用 其 他 形式 
来 蔡 代 if 表达 式 。 例 如 下 面 这 段 代 码 : 
vara= 1; 
Var result = "; 
if (a === 1) { 
result = "a is one"; 
} else { 
result = "a is not one"; 
} 
我 们 完全 可 以 将 其 位 化 为 : 
>vara= 1; 
> var result = (a === 1) ? "a is one" : "a is not one'"; 
但 需要 提醒 的 是 ， 这 种 语法 通常 只 用 于 一 些 非 常 简 单 的 条 件 逻 
辑 ， 王 万 不 要 小 用。 因为 这 样 做 很 容易 使 我 们 的 代码 变 得 难以 理解 。 
以 下 是 一 个 滥用 的 例子 。 
假设 我 们 需要 判断 一 个 变量 是 否 在 某 个 区 间 (例如 从 50 到 100) 
内 。 如 变量 不 在 这 个 区 间 ， 程 序 就 会 将 最 接近 当前 值 的 那个 区 间 边 界 


赋值 给 变量 。 

> var a = 123; 

>a=a>100?100:a<50°?50:a; 

>a; 

100 

由 于 这 里 执行 了 两 次 ?: 操 作 ， 这 会 使 我 们 无 法 一 眼 判 断 表达 式 的 运 
行 顺序 。 为 了 让 表达 式 显 得 更 清 蜥 一些， 我们 最 好 还 是 在 其 中 加 入 一 
Ee 

> var a = 123; 

>a=(a>100°?100:a<50)?50:a; 

>a; 

50 

> var a = 123; 

>a=a>100?100:(a<50°?50:a); 

>a; 

100 

这 里 的 ?: 操 作 符 叫 做 三 元 运算 符 ， 因 为 它 需 要 三 个 操作 数 。 

2.6.4.2 switch 语句 

当 我 们 发 现 目 己 在 证 表达 式 中 使 用 了 太 多 的 else 主子 句 时 ， 束 应 
该 要 考虑 用 switch 语 句 来 替代 if 了。 


vara= "1" 


Var result = "; 

switch (a) { 

case 1: 
result = 'Number 1'; 
break; 


Case 'l': 


result = 'String 1'; 
break; 
default: 
result = 'T don\'t know '; 
break; 
} 
显然 ， 这 段 代码 的 执行 结果 为 "String 1"。 现 在 ， 让 我 们 来 看 看 
switch 表达 式 主要 由 哪 几 部 分 组 成 。 
switch 子 句 。 
括号 中 的 表达 式 。 它 通常 会 是 一 个 变量 ,但 也 可 以 古 其 他 任何 能 
提供 返回 值 的 东西 。 
包含 在 大 括号 中 的 case 序列 块 。 
每 个 case 语 句 后 面 有 一 个 表达 式 ， 该 表达 式 的 结果 将 会 与 switch 语 
名 的 表达 式 进行 比 对 。 如 果 比 对 的 结果 为 tue， 则 case 语 句 中 冒号 之 后 
的 代码 将 会 被 执行 。 
break 语 句 是 可 选 的 ， 它 实际 上 是 case 块 的 结束 符 ， 即 当代 码 执行 
到 break 语 句 时 ， 整 个 switch 语 句 就 执行 完成 了 ， 否 则 就 继续 执行 下 一 个 
case 块 。 
使 用 关键 字 default 标记 的 默认 条 件 代 码 块 。 如 采 其 他 case 条 件 都 
不 为 true 的 话 ，default 条 件 就 会 被 执行 。 
换 名 话说， 整个 switch 语 句 的 执行 应 该 可 以 分 为 以 下 几 个 步骤 。 
1. 对 switch 语 名 后面 的 括号 部 分 进行 求 值 ， 并 记录 结果 。 
2. 移动 到 第 一 个 case 条 件 ， 将 它 的 人 与 步骤 1 的 结果 进行 比 对 。 
3， 如 果 步 又 2 中 的 比 对 结果 为 tue， 则 执行 该 case 块 中 的 代码 。 
4. 在 相关 case 块 执行 完成 之 后 ， 如 果 遇 到 break 语 句 就 直接 退出 


switch 。 


5， 如 没有 遇 到 break 或 步骤 2 中 的 比 对 结果 为 false， 歌 继续 下 一 个 
case 块 。 

6. 重复 步骤 2 到 5 中 的 操作 。 

7. 如 果 依 然 还 没有 结束 (也 就 是 始终 未 能 按照 步骤 4 中 的 方式 退 
出 ) ， 就 执行 default 语 句 后 面 的 代码 块 。 

最 住 实践 
将 case 后 面 的 代码 相对 于 case 缩 进 。 当 然 您 也 可 以 将 case 相 对 于 
switch 缩 进 ， 但 这 样 其 实 不 会 增加 代码 的 可 读 性 。 

不 要 起 了 break。 

有 时 候 ， 我 们 会 希望 故意 省 略 一 些 break 语句 ， 当 然 ， 这 种 叫做 
贯穿 (fall-through) 的 做 法 在 实际 应 用 中 并 不 和 常见， 因为 它 通常 会 被 误 
认为 是 人 为 的 遗漏 。 故 而 使 用 时 往往 需要 在 文档 中 加 以 说 明 。 但 从 另 
一 方面 来 说 ， 如 果 我 们 真 的 有 意 让 两 个 相 邻 的 case 语句 共享 同一 段 代 
码 的 话 ， 这 样 做 并 没有 什么 不 妥 。 只 不 过 ， 这 不 能 改变 相 天 的 规则 ， 
即 如 果 执 行 代码 是 写 在 case 语 句 之 后 的 话 ， 它 依然 应 该 以 break 结 尾 。 
另外 在 缩 进 方面 ，break 是 选择 与 case 对 齐 还 是 与 相关 的 代码 块 对 齐 ， 
完全 取决 于 个 人 喜好 ， 只 要 体 持 风格 的 一 致 性 即 可 。 

尽量 使 用 default 语 句 。 因 为 这 可 以 使 我 们 在 switch 找 不 到 任何 匹配 
的 情况 下 ， 也 依然 能 返回 一 些 有 意义 的 结果 。 


2.6.5 循环 


通过 if-else 和 switch 语 句 ， 我 们 可 以 在 代码 中 采取 不 同 的 执行 路 
径 。 好 比 我 们 处 于 十 字 路 口 时 ， 可 以 根据 某 个 具体 的 条 件 来 选择 上 自己 
的 走 癌 。 然 而 ， 循 环 葡 完全 是 另 一 回 事 了 ， 我 们 可 以 利用 它 使 代码 在 
返回 主 路 径 之 前 先 去 执行 某 些 重复 操作 。 至 于 重复 的 次 数 ， 则 完全 取 
决 于 我 们 设 定 在 每 次 迭代 之 前 (或 之 后 ) 的 条 件 值 。 


比如 说 ， 我 们 的 程序 通常 都 是 在 A 点 到 B 点 之 间 运 行 ， 如 果 我 们 在 
这 之 间 设 置 了 一 个 条 件 C， 而 这 个 条 件 的 值 将 会 决定 我 们 是 否 要 进入 
循环 L。 那 么 一 旦 进入 了 循环 ， 我 们 束 必 须 在 每 次 友 代 完成 之 后 对 该 条 
件 进 行 重新 求 值 ， 以 判断 是 否 要 执行 下 一 次 太 代 。 总 之 ， 我 们 最 终 还 
是 会 回 到 通 往 B 点 的 路 径 上 来 的 。 


A B 


当 某 循环 的 条 件 永 为 tue 时 ， 它 惑 成 了 一 个 无 限 循 环 。 这 意味 着 代 
码 将 会 被 “永远 ” 困 在 循环 中 。 这 无 疑 古 一 个 逻辑 上 的 错误 ， 我 们 必须 
对 此 加 以 防范 。 

在 JavaScript 中 ， 循 环 主要 有 以 下 四 种 类 型 : 

while 循 环 ; 

do-while 循环 ; 

for 循环 ; 

for-in 循 环 。 

2.6.5.1 while 循环 

while 循 环 是 最 为 简单 的 一 种 循环 ， 它 们 通 弟 是 这 样 的 : 

vari=0; 

while (i < 10) { 

i+ 十 ; 


} 


whbile 语 句 主 要 分 为 两 个 部 分 : 小 括号 中 的 条 件 和 大 括号 中 的 代码 
块 。 当 日 仅 当 条 件 值 为 true 时 ， 代 码 块 才 会 被 反复 执行 。 

2.6.5.2 do-while 循环 

do-while 循 环 实际 上 是 while 循 环 的 一 种 轻微 的 变种 。 示 例如 下 : 

vari=0; 

dof{ 

十 十 ; 

} while (i < 10); 

在 这 里 ，do 语 句 后 面 完 出 现 的 是 代码 块 ， 然 后 才 是 条 件 。 条 件 出 
现在 代码 块 之 后 ， 这 意味 着 代码 块 无 论 如 何 都 会 被 执行 一 次 ， 然 后 再 
去 对 条 件 部 分 进行 求 值 。 

如 果 我 们 将 上 面 两 个 示例 中 的 i 彻 始 化 为 11 而 不 是 0 的 话 ， 第 一 个 例 
子 (while 循 环 ) 中 ， 代 码 块 将 不 会 执行 ，i 最 终 的 值 仍 然 是 11， 而 第 二 
个 例子 (do-while 循 环 ) 中 的 代码 块 将 会 被 执行 一 次 ，i 的 值 也 会 变 为 
12。 

2.6.5.3 for 循环 

for 是 使 用 得 最 为 广泛 的 循环 类 型 ， 也 是 我 们 最 应 该 掌握 的 内 容 。 
实际 上 ， 这 也 只 需要 掌握 一 点 点 语法 知识 。 
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在 条 件 C 和 代码 块 L 的 基础 上 ， 我 们 还 需要 增加 以 下 两 个 部 分 的 内 


容 


初始 化 部 分 一 一 在 进入 循环 之 前 所 要 执行 的 代码 ( 即 图 中 0 所 标识 
的 内 容 ) 

目 增 部 分 
的 内 容 ) 

最 稍 用 的 for 人 循环 模式 主要 包括 以 下 内 容 。 

在 初始 化 部 分 中 ， 我 们 会 定义 一 个 循环 变量 (通常 命名 为 1) ， 例 
如 vari= 0;。 

在 条 件 部 分 中 ， 我 们 会 将 i 与 循环 边界 值 进行 比 对 。 例 如 i < 100。 

在 目 增 部 分 中 ， 我 们 会 将 循环 变量 i 自 增 1， 如 i++ 。 

下 面 来 看 一 个 具体 示例 : 

var punishment = "; 

for (vari= 0;i< 100; i++) { 

punishment += 'T will never do this again，; 

} 

实际 上 ， 这 三 个 部 分 (初始 化 、 循 环 条 件 、 自 增 操 作 ) 都 可 以 写 
成 用 喜 呈 分割 的 多 重 表达 式 。 例 如 ， 我 们 可 以 重 写 一 过 上 面 的 例子 ， 
在 其 初始 化 部 分 量 的 定义 。 


for (vari = 0, punishment = "; i < 100; i++) { 


每 次 迭代 完成 后 所 要 执行 的 代码 〈 即 图 中 ++ 所 标识 


punishment += 'T will never do this again，; 
} 
那么 ， 我 们 能 不 能 把 循环 体 中 的 内 容 移 到 上 自 增 部 分 中 去 呢 ? 当然 
可 以 ,尤其 当 其 中 只 有 一 行内 容 时 。 只 不 过 这 样 的 循环 看 上 去 有 点 令 
人 槛 罚 ， 因 为 它 没 有 循环 体 了 。 
for ( 
vari= 0, punishment = "; 
i < 100; 


i++, punishment += 'T will never do this again，){ 


/nothing here 
} 
事实 上 ， 这 三 部 分 也 都 是 可 选 的 ， 上 面 的 例子 也 完全 可 以 写成 下 
面 这 样 : 
vari= 0, punishment = "; 
for (;;) { 
punishment += 'T will never do this again, '; 
if (++i == 100) { 
break: 
} 
} 
尽管 代码 重 写 之 后 的 工作 方式 与 原来 相同 ， 但 它 显 得 更 长 ， 可 读 
性 也 更 差 了 。 。 但 for 循 环 可 以 使 
代码 更 紧 痰 、 更 疡 谨 。 它 的 三 个 部 分 “初始 化 、 循 环 条 件 、 自 增 操 
作 ) 泾 渭 分 明 ， 语 ; °。 这些 都 有 利于 我 们 理 清 程 序 的 逻 
辑 ， 从 而 避免 类似 于 无 限 循环 这 样 的 麻烦 。 
另外 ，for 循 环 还 可 以 彼此 藤 套 。 下 面 ， 我 们 来 看 一 个 骨 套 循环 的 
具体 示例 。 假 设 该 例 要 打印 一 个 10 行 10 列 的 星 号 字符 串 ， 那 么 我 们 就 
可 以 用 i 来 表示 行 数 ，j 则 表示 列 数 ， 以 构成 一 个 “图 形 ”: 
Var res = "\n'; 
for(var i= 0; i < 10; i++) { 
for(var j = 0; j < 10; j++) { 
res += '*，"， 
} 


rest+= "\n'; 


最 终 ， 该 字符 串 输 出 如 下 : 


并 并 并 洒洒 并 并 站 区 站 
并 放 和 人 关 并 和光 关 并 区 
并 洗 光洁 开交 站 并 外 站 
半 半 半 外 站 外 站 站 站 站 
时 
并 闪 半 并 并 站 半 并 外 站 
并 并 站 外 半 外 站 交 并 站 
A 
并 闪 半 并 站 站 站 并 外 站 
六 站 站 站 半 站 站 站 站 站 


上 
男 外 ， 我 们 还 可 以 用 购 套 循环 和 取 模 运算 画 出 一 个 雪花 状 的 图 
形 ， 代 码 如 下 : 
var res = \n, i, j; 
for(i = 1; i <= 7; it+) { 
forj = 1;j <= 15; j++) { 
res += (i*]j)%8?"":"*", 
} 


rest+= "\n'; 


} 
其 输出 如 下 。 


Hn 

2.6.5.4 for-in 循环 

for-in 循 环 往往 被 用 来 遍历 某 个 数组 (或 对 象 ， 这 一 点 我 们 以 后 再 
讨论 ) 中 的 元 素 。 这 似乎 也 是 它 唯 一 的 用 处 ， 该 循环 不 能 用 来 替代 for 
或 while 循 环 ， 执 行 某 些 一 般 性 的 重复 操作 。 下 面 ， 我 们 来 看 一 个 forin 
人 遍历 数组 元 素 的 示例 。 当 然 ， 例 子 仅 供 参 考 。 毕 竟 对 于 for-in 循 环 来 
说 ， 它 最 适用 的 场合 依然 是 对 象 ， 以 及 用 于 常规 for 循 环 的 数组 。 

在 下 面 的 示例 中 ， 我 们 将 过 历数 组 中 的 所 有 元 素 ， 并 打印 出 当前 
所 在 的 索引 位 置 和 元 素 值 。 


//example for information only 


// for-in loops are used for objects 


//regular for is better suited for arrays 


vara=['a,b，c，X，y，Z]; 
var result = \n'; 
for (vari in a) { 
result += "index: '+i+", value: '+ ali] + \n'; 
} 
结 示 如 下 : 
index: 0, value: a 
index: 1, value: b 
index: 2, value: c 
index: 3, value: x 
index: 4, value: y 
Z 


index: 5, value: 


ry 


现在 ， 我 们 来 看 本 章 最 后 一 个 内 容 : 注释 。 通 过 注释 这 种 形式 ， 
我 们 可 以 将 自己 的 一 些 想法 放 在 JavaScript 代 码 中 。 由 于 注释 中 的 内 容 
会 被 JavaScript 引 擎 自动 忽略 掉 ， 因 此 它们 不 会 对 程序 产生 任何 影响 。 
而 当 您 几 个 月 后 重新 考虑 这 段 代 码 ， 或 将 其 转让 给 其 他 人 维护 时 ， 这 
些 注 释 束 会 显得 非常 重要 。 

注释 的 形式 主要 有 以 下 两 种 。 

单行 注释 一 一 以 /开头 并 直至 该 行 结束 。 

多 行 注 释 一 一 以 /* 开 头 ， 并 以 */ 结 尾 ， 其 中 可 以 包括 一 行 或 多 行内 
容 。 但 要 记 住 ， 注 释 首 尾 符 之 间 的 任何 代码 都 将 会 被 忽略 。 


具体 示例 如 下 : 

// beginning of line 

var a = 1; // anywhere on the line 

/* multi-line comment on a single line */ 

/* 

comment that spans several lines 
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甚至 ， 有 些 实用 工具 (例如 JSDoc 及 YUIDoc) 可 以 从 我 们 的 代码 
中 提取 相关 的 注释 ， 并 据 此 生成 有 意义 的 项 目 文档 。 


2.8 小 结 


在 这 一 章 中 ， 我 们 学 习 了 编写 一 个 JavaScript 程序 所 需要 的 基本 组 
件 。 现 在 ， 您 应 该 已 经 掌握 了 以 下 几 种 基本 数据 类 型 : 

光泽 

字符 串 

布尔 值 


Undefined 


null 

您 也 已 经 了 解 了 一 些 基 本 的 操作 符 : 
算术 运算 符 : + 、-、*、/、%; 

自 增 ( 减 ) 运算 符 : ++、--; 

赋值 运算 符 : =、+=、-=、*=、/=、%=; 
特殊 操作 符 : typeof 、delete; 

逻辑 运算 符 : && 、||、!; 


比较 运算 符 : ==、===、!=、!==、<、>、>=、<=; 


们 还 为 您 介绍 了 几 种 不 同 的 控制 程序 流程 的 方法 


三 亏 运 算得 : 92: 9 
另外 ， 我 们 还 学 习 了 如 何 使 用 数组 来 存储 和 访问 数据 。 最 后 ， 我 
条 件 (if-else 和 


switch 语句 ) 和 循环 (while、do-while、for、forin 语 句 ) 。 


让 


全 


本 章 的 信息 量 确实 不 小 ， 因 此 我 们 建议 您 通过 下 面 的 练习 巩固 一 
在 继续 深入 下 一 章 的 学 习 之 前 ， 我 们 需要 给 上 自己 一 些 鼓励 。 


2.9 练习 题 
1， 如 果 我 们 在 控制 台中 执行 下 列 语句 ， 结 果 分 别 是 什么 ? 为 什 


> var a; typeof a; 

> vars = "1s'; S+ 十 ; 

> !!"false"; 

> !Iundefined， 

> typeof -Infinity; 

> 10 9%6 "0"; 

> undefined == null; 

> false === ""，; 

> typeof "2E+2"; 

>a= 3et+3; a+ 十 ; 

2. 执行 下 面 的 语句 后 ，v 的 值 会 是 什么 ? 
>varv=vVv||10; 

如 果 将 v 分 别 设置 为 100、0、null， 结 果 又 将 是 什么 ? 
3. 编写 一 个 打印 乘法 口诀 表 的 脚本 程序 。 提 示 : 使 用 符 套 循环 来 


实现 。 


注 释 


[1]. 此 处 原文 为 typeof n;， 但 上 有 浊 | 呆 应 属 笔 误 
[2]. 三 原色 模式 (RGB color model) 是 一 型 ， 指 用 三 种 原名 红色 、 绿 名和 蓝 
| |7 日 加 口 天 后 交 由 宇 


第 3 章 图 数 


对 于 学 习 任何 程序 设计 语言 来 说 ， 掌 握 函 数 都 是 非常 重要 的 。 对 
于 JavaScript 更 是 如 此 ， 因 为 该 语言 中 的 很 多 功能 、 其 灵活 性 以 及 表达 
能 力 都 来 目 函数 。 例 如 ， 绝 大 部 分 语言 都 有 目 己 专门 的 面向 对 象 的 语 
法 ， 而 JavaScript 没 有 : 它 是 通过 函数 来 实现 面 问 对 象 特性 的 。 在 这 一 
章 中 ， 我 们 首先 要 掌握 如 下 内 容 : 
如 何 定义 和 使 用 函数 
如 何 向 函数 传递 参数 ，; 
了 解 我 们 可 以 “免费 ”调用 哪些 预定 义 函 数 ; 
了 解 JavaScript 中 的 变量 作用 域 ; 
理解 “函数 也 是 数据 ?的 概念 ， 并 将 函数 视 为 一 种 特殊 的 数据 类 
理解 了 上 述 内 容 之 后 ， 我 们 就 可 以 继续 深入 本 章 的 第 二 部 分 。 在 
这 一 部 分 中 ， 您 将 会 看 到 一 些 有 趣 的 函数 应 用 : 

匿名 函数 的 调用 ; 

回调 函数 ; 

即时 ( 自 调 ) 函数 

内 内 函数 〈 在 函数 内 部 定义 的 函数 ) ; 

以 函数 为 返回 值 的 钞 数 ; 

能 重 定义 目 身 的 函数 

闭 包 。 


(一 


型 


3.1 什么 是 


所 谓 函 数 ， 本 质 上 十 一 种 代码 的 分 组 形式 。 我 们 可 以 通过 这 种 形 
式 赋予 某 组 代码 一 个 名 字 ， 以 便于 之 后 的 调用 。 下 面 ， 我 们 来 示范 一 
下 函数 的 声明 : 

function sum(a, b) { 


varc=atb; 


return c; 
} 
一 般 来 说 ， 函 数 声 明 通 常 由 以 下 几 部 分 组 成 。 
关键 词 function 。 


函数 名 称 ， 即 这 里 的 sum 。 

函数 所 需 的 参数 ， 即 这 里 的 a、b。 一 个 函数 通 名 都 具有 0 个 或 多 个 
参数 。 参 数 之 间 用 逗号 分 隔 。 

函数 所 要 执行 的 代码 块 ， 我 们 称 之 为 函数 体 。 

return 子 句 。 函 数 通常 都 会 有 返回 值 ， 如 采 某 个 函数 没有 显 式 的 返 
回 值 ， 我 们 残 会 默认 它 的 返回 值 为 undefined。 

需要 注意 的 是 ， 一 个 函数 只 能 有 一 个 返回 值 ， 如 果 我 们 需要 同时 
返回 多 个 什 ， 可 以 考虑 将 其 放 进 一 个 数组 里 ， 以 数组 元 素 的 形式 返 
回 


O 〇 


这 里 的 整个 语法 过 程 叫 做 函数 声明 。 在 JavaScript 中 ， 函 数 声 明 只 
是 创建 画 数 的 方法 之 一 ， 之 后 我 们 会 介绍 其 他 方法 。 


3.1.1 调用 函数 


如 果 我 们 需要 使 用 一 个 函数 ， 束 必须 要 去 调用 它 。 调 用 的 方式 很 
简单 ， 只 需 在 函数 名 后 面 加 一 对 用 以 传递 参数 的 括号 即 可 。 另 外 ， 对 


于 “调用 (to call) ”这 种 操作 ， 我 们 有 时 也 可 以 将 其 称 之 为 “请 求 (to 
invoke) ” 某 个 函数 。 

现在 ， 让 我 们 来 调用 一 下 sum0 函 数 。 移 将 两 个 参数 传递 给 该 函 
数 ， 然 后 再 将 函数 的 返回 值 赋值 给 变量 result。 有 具体 如 下 : 


> var result = Sum(1, 2); 


> result; 
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3.1.2 参数 


在 定义 一 个 函数 的 同时 ， 我 们 往往 会 设置 该 画 数 所 需 的 调用 参 
数 。 当 然 ， 您 也 可 以 不 给 它 设 定 参数 ， 但 如 果 您 设 定 了 ， 而 又 在 调用 
时 忘 了 传递 相关 的 参数 值 ，JavaScript 引 警 就 会 自动 将 其 设 定 为 
undefined。 例 如 在 下 面 这 个 调用 中 ， 函 数 返 回 的 是 NaN， 因 为 这 里 试 
图 将 1 与 undefined 相 加 。 

> sum(1); 

NaN 

从 技术 角度 来 说 ， 参 数 又 可 分 为 形 参 (形式 参数 ) 与 实 参 (实际 
参数 ) 两 种 ， 但 我 们 往往 并 不 需要 严格 区 分 它们 。 形 参 是 指定 义 函 数 
时 所 用 的 那些 参数 ， 而 实 参 则 指 的 是 在 调用 函数 时 所 传递 的 那些 参 
数 。 考 虑 以 下 例子 。 


> function sum(a, b){ 


returmm a + b; 


} 
> sum!(1, 2); 
在 这 里 ，a 和 b 有 是 形 参 ， 而 1 和 2 是 实 参 。 


对 于 那些 已 经 传递 进来 的 参数 ，JavaScript 是 来 者 不 拒 的 。 但 是 ， 
即便 我 们 向 sum0) 传 递 再 多 的 参数 ， 多 余 的 那 部 分 也 只 会 被 默默 地 忽略 
本 

> Sum(1, 2, 3, 4, 5); 

3 

实际 上 ， 我 们 还 可 以 创建 一 些 在 参数 数量 方面 更 为 灵活 的 函数 。 
这 得 益 于 函数 内 部 的 arguments 变量 ， 该 变量 为 内 建 变 量 ， 每 个 函数 中 
都 能 调用 。 它 能 返回 函数 所 接收 的 所 有 参数 。 例 如 : 


> function args() { 


return arguments; 
} 
> args(); 
[] 
> args( 1, 2, 3, 4, true, ninja'); 
[1, 2, 3, 4, true, "ninja"] 
通过 变量 arguments ， 我 们 可 以 进一步 完善 sum0 男 数 的 功能 ， 使 
之 能 对 任意 数量 的 参数 执行 求 和 运算 。 
function sumOnSteroids() { 
Var j， 
res = 0， 
number of params = arguments.length; 
for (i= 0; i < number_of params; i++) { 
res += arguments[il; 
} 


return res; 


下 面 ， 我 们 用 不 同 数量 的 参数 (包括 没有 参数 ) 来 测试 该 函数 ， 
看 看 它 是 否 能 按照 我 们 预计 的 方式 工作 : 

> sumOnSteroids(1, 1, 1); 

3 

> sumOnSteroids(1, 2, 3, 4); 

10 

> sumOnSteroids(1, 2, 3, 4, 4, 3, 2, 1); 

20 

> sumOnSteroids(5); 

5 

> sumOnSteroids(); 

0 

其 中 ， 表 达 式 arguments.length 返 回 的 是 函数 被 调用 时 所 接收 的 参 
数 数量 。 如 果 您 对 这 段 代 码 中 的 某 些 语法 不 太 熟 悉 ， 也 不 必 太 担心 ， 
我 们 将 会 在 下 一 章 中 详细 讨论 它们 。 到 那 时 ， 您 会 发 现 arguments 实 际 
上 不 是 一 个 数组 (虽然 它 有 很 多 数组 的 特性 ) ， 而 是 一 个 类 似 数组 的 
对 象 。 


3.2 》 


JavaScript 引 苟 中 有 一 组 可 供 随时 调用 的 内 建 画 数 。 下 面 ， 让 我 们 
来 了 解 一 下 这 些 芳 数 。 在 这 一 过 程 中 ， 我 们 会 通过 一 系列 具体 的 范 数 
实践 ， 来 帮助 您 掌握 这 些 函 数 的 参数 和 返回 值 ， 以 便 最 终 实现 熟练 应 
用 。 这 些 内 建 函 数 包 括 ; 

parselnt(); 


parseFloat(); 


isNaN(); 

isFinite(); 

encodeURI(); 

decodeURIO; 

encodeURIComponent(); 

decodeURIComponent(); 

eval()° 

墨盒 函数 

一 般 来 说 ， 当 我 们 调用 一 个 函数 时 ， 程 序 是 不 需要 知道 该 画 数 的 
内 部 工作 细 区 的 。 我 们 可 以 将 其 看 做 一 个 黑 盒 子 ， 您 只 需要 给 它 一 些 
值 (作为 输入 参数 ) ， 了 就 能 获取 它 输出 的 返回 结果 。 这 种 思维 适用 于 
任何 函数 一 一 既 包 括 JavaScript 中 的 内 建 画 数 ， 也 包括 由 任何 个 人 或 集 
体 所 创建 的 函数 。 


3.2.1 parselInt() 


parseInt() 会 试图 将 其 收 到 的 任何 输入 值 (通常 是 字符 串 ) 转换 成 
整数 类 型 输出 。 如 采 转 换 失 败 束 返 回 NaN 。 

> parselInt('123'); 

123 

> parselInt('abc123"); 

NaN 

> parselInt('l1abc23'); 

1 

> parseInt(123abc ); 

123 


除 此 之 外 ， 该 函数 还 有 个 可 选 的 第 二 参数 : 基数 (radix) ， 它 负 
贡 设 定 画 数 所 期 望 的 数字 类 型 一 一 十 进 制 、 十 六 进 制 、 二 进 制 等 。 在 
下 面 的 例子 中 ， 如 来 试图 以 十 进 制 输出 子 符 串 "FF"， 结 果 束 会 为 NaN 。 
而 改 为 十 六 进 制 ， 我 们 束 会 得 到 255 。 

> parselInt('FF', 10); 

NaN 

> parselInt('FF', 16); 

255 

再 来 看 一 个 将 字符 串 转 换 为 十 进 制 和 八进制 的 例子 : 

> parselInt('0377', 10); 

377 

> parseInt('0377', 8); 

255 

如 采 我 们 在 调用 parseInt0 时 没有 指定 第 二 参数 ， 画 数 束 会 将 其 默 
认为 十 进 制 ， 但 有 两 种 情况 例外 。 

如 果 首 参数 字符 串 是 0x 开头 ， 第 二 参数 就 会 被 默认 指定 为 16 (也 
就 是 默认 其 为 十 六 进 制 数 ) 。 

如 果 首 参数 以 0 开头 ， 第 二 参数 就 会 被 默认 指定 为 8 (也 就 是 默认 
其 为 八进制 数 ) 。 

> parselInt('377"); 

377 

> parselInt('0377'); 

255 

> parselInt('O0x377'); 

887 

当然 ， 明 确 指定 radix 值 总 是 最 安全 的 。 如 果 您 省 略 了 它 ， 尽 管 
99% 的 情况 下 依然 能 够 正常 运作 〈 毕 竟 最 常用 的 还 是 十 进 制 数 ) ， 但 我 


们 偶尔 还 是 会 在 调试 时 发 现 一 些小 问题 。 例 如 ， 当 我 们 从 日 历 中 读 取 
日 期 时 ， 对 于 08 这 样 的 数据 ， 如 果 不 设 定 radix 参 数 可 能 就 会 导致 意 想 
不 到 的 结果 。 

值得 一 提 的 是 ，ECMAScript 5 移 除 了 八进制 的 默认 表示 法 ， 
兔 了 其 在 parseInt() 中 与 十 进 制 的 混淆 。 


3.2.2 parseFloat() 


parseFloatO 的 功能 与 parseInt0 基 本 相同 ， 只 不 过 它 仅 支持 将 输入 值 
转换 为 十 进 制 数 。 因 此 ， 该 函数 只 有 一 个 参数 。 

> parseFloat( 123 7); 

123 

> parseFloat('1.23"); 

1.23 

> parseFloat('1.23abc.00'); 

1.23 

> parseFloat('a.bc1.23'); 

NaN 

与 parseInt() 相 同 的 是 ，parseFloat() 在 遇 到 第 一 个 异常 字符 时 整 会 放 
弃 ， 无 论 剩余 的 那 部 分 字符 串 是 个 可 用 。 

> parseFloat(a123.34 ); 

NaN 

> parseFloat('12a3.34'); 

12 

此 外 ，parseFloat0 还 可 以 接受 指数 形式 的 数据 (这 点 与 parseInt() 不 
同 ) 。 

> parseFloat('123e-2'); 


1.23 

> parseFloat('l1e10"); 
10000000000 

> parseInt('le10"); 

1 


3.2.3 isNaN() 


通过 isNaN()， 我 们 可 以 确定 某 个 输入 值 是 否 是 一 个 可 以 参与 算术 
运算 的 数字 。 因 而 ， 该 函数 也 可 以 用 来 检测 parseInt0 和 parseFloat(O 的 调 
用 成 功 与 否 。 

> isNaN(NaN); 

true 

> isNaN(123); 

false 

> isNaN(1.23); 

false 

> isNaN(parselInt(abc123')); 

true 

该 男 数 也 会 始终 试图 将 其 所 接收 的 输入 转换 为 数字 ， 例 如 : 

> isSNaN(1.237); 

false 

> isNaN('al.23'"); 

true 

isNaN() 函 数 是 非常 有 用 的 ， 因 为 NaN 自 己 不 存在 等 值 的 概念 ， 也 
束 是 说 表达 式 NaN === NaN 退回 的 是 false， 这 确实 让 人 觉得 有 点 菲 夷 
所 思 凸 。 


3.2.4 isFinite() 


isFinite() 可 以 用 来 检查 输入 是 否 是 一 个 既 非 Infinity 也 非 NaN 的 数 
字 o 

> isFinite(Infinity); 

false 

> isFinite(-Infinity); 

false 

> jsFinite(12); 

true 

> isFinite(1e308); 

true 

> isFinite(1e309); 

false 

关于 后 两 个 调用 的 结果 ， 我 们 可 以 回忆 上 一 章 中 的 内 容 ， 即 
JavaScript 中 的 最 大 数字 为 1.7976931348623157e+308， 因 此 1e309 会 被 
视 作 为 无 穷 数 。 


3.2.5 URI 的 编码 与 反 编码 


在 URL (Uniform Resource Locator， 统 一 资源 定位 符 ) 或 URI 
(Uniform Resource Identifier， 统 一 资源 a 从 1 符 ， 中 ， 有 一 些 字符 是 具 

有 特殊 含义 的 。 如 果 我 们 想 “ 转 义 ” 这 些 字 符 ， 束 可 以 去 调用 芳 数 
encodeURIO 或 encodeURIComponentO。 部 前 者 全 会 返回 一 个 可 用 的 URL， 
WE URL 的 一 部 分 。 例 如 ， 对 于 下 面 
这 个 查询 字符 串 来 说 ， 这 两 个 范 数 所 返回 的 字符 编码 分 别 是 

> var Url = 'http:/www.packtpub.com/scr ipt.php?q=this and that'; 

> encodeURI(ur}); 


"http:/www.packtpub.comy/scr2%620ipt.php?q=this9020and9%620that" 

> encodeURIComponent(ur]); 

"http%3A%2F%2Fwww.packtpub.com%2Fscr%20ipt.php%3Fq%3Dth 
is%20and%20that" 

encodeURI() 和 encodeURIComponent() 分 别 都 有 各 目 对 应 的 反 编码 
函数 : decodeURI() 和 decodeURIComponentO 。 

另外 ， 我 们 有 时 候 还 会 在 一 些 遗 留 代码 中 看 到 相似 的 编码 函数 和 
反 编 码 函 数 escape() 和 unescape()， 但 我 们 并 不 赞成 使 用 这 些 函 数 来 执 
行 相关 的 操作 ， 它 们 的 编码 规则 也 不 尽 相 同 。 


3.2.6 eval() 


eval() 会 将 其 输入 的 字符 串 当做 JavaScript 代 码 来 执行 。 

> eval(var ii = 2;'); 

> 1; 

2 

所 以 ， 这 里 的 eval(var ii = 2;') 与 表达 式 var ii = 2; 的 执行 效果 是 相 


尽管 eval0 在 某 些 情况 下 是 很 有 用 的 ， 但 如 果 有 选择 的 话 ， 2 
该 尽量 避免 使 用 它 。 毕 竟 在 大 多 数 情 况 下 ， 我 们 有 更 优雅 的 选择 ， 
些 选 择 通常 也 更 易于 编写 和 维护 。 ee JavaScript 
员 来 说 , “Eval is evil” (Eval 是 魔 时 ) 是 一 名 至理名言 。 

因为 eval0 是 这 样 一 种 函数 : 

安全 性 方面 JavaScript 拥有 的 功能 很 强大 ， 但 这 也 意味 着 很 大 
的 不 确定 性 ， 如 有 果 您 对 放 在 eval0 函 数 中 的 代码 没有 太 多 把 握 ， 最 好 还 
是 不 要 这 样 使 用 。 


性 能 方面 一 一 它 征 一 种 由 函数 执行 的 “动态 ”代码 ， 所 以 要 比 直接 
执行 脚本 要 慢 。 


3.2.7 一 点 惊喜 - alert(0) 函 数 


接 下 来 ， 让 我 们 来 看 一 个 非 彰 第 见 的 函数 一 一 alert0。 该 国 数 不 是 
JavaScript 核 心 的 一 部 分 ( 即 它 没 有 包括 在 ECMA 标 准 中 ) ， 而 是 由 宿 
主 环境 一 浏览 器 所 提供 的 ， 其 作用 是 显示 一 个 带 文本 的 消息 对 话 框 。 
这 对 于 某 些 调试 很 有 帮助 。 当 然 ， 大 多 数 情况 下 ， 现 代 浏 览 器 的 调试 
工具 时 加 好 用 一 些 s 

图 3-1 束 是 alert("hello!") 的 执行 效果 图 。 


rr 


The page at hitp://phpied.com says: 


图 3-1 
当然 ， 在 使 用 这 个 函数 之 前 ， 我 们 必须 要 明日 这 样 做 会 阻 豆 当前 
的 浏 贤 右 线程 。 也 就 是 说 ， 在 alert0 的 执行 窗口 关闭 之 前 ， 当 前 所 有 的 
代码 都 会 暂停 执行 。 因 此 ， 对 于 一 个 忙 太 的 AJAX 应 用 程序 来 说 ， 
alertO 通 名 不 是 一 个 好 的 选择 。 


3.3 变量 的 作用 域 


这 是 一 个 至 天 重要 的 问题 。 符 别 是 当 我 们 从 别 的 语言 转向 
JavaScript 时 ， 必 须要 明白 一 点 ， 即 在 JavaScript 中 ， 变 量 的 定义 并 不 是 
以 代码 块 作为 作用 域 的 ， 而 是 以 函数 作为 作用 域 。 也 束 是 说 ， 如 打 变 
量 是 在 某 个 函数 中 定义 的 ， 那 么 它 在 函数 以 外 的 地 方 是 不 可 见 的 。 而 
如 采 该 变量 是 定义 在 这 或 者 for 这 样 的 代码 块 中 的 ， 它 在 代码 块 之 外 十 可 
见 的 。 男 外 ， 在 JavaScript 中 ， 术 语 “ 全 局 变量 ” 指 的 是 定义 在 所 有 函数 
之 外 的 变量 (也 就 是 定义 在 全 局 代码 中 的 变量 ) ， 与 之 相对 的 是 “局 部 
变量 ”， 所 指 的 则 是 在 某 个 函数 中 定义 的 变量 。 其 中 ， 函 数 内 的 代码 可 
以 像 访问 目 己 的 局 部 变量 那样 访问 全 局 变量 ， 反 之 则 不 行 。 

下 面 来 看 一 个 具体 示例 ， 请 注意 两 点 : 

函数 人 0 可 以 访问 变量 global。 

在 函数 f0 以 外 ， 变 量 local 是 不 存在 的 。 

var global = 1; 

function fO { 


var local = 2; 
global++; 
return global; 
} 
让 我 们 来 测试 一 下 : 
> {0; 
2 
> {0; 
3 
> local; 
ReferenceError: local is not defined 
这 里 还 有 一 点 很 重要 ， 如 有 果 我 们 声明 一 个 变量 时 没有 使 用 var 语 
句 ， 该 变量 就 会 被 默认 为 全 局 变量 。 让 我 们 来 看 一 个 具体 示例 ， 如 图 3- 


2 所 示 。 


Developer Tools - chrome://newtab/ 


一 | CE £= | 一 

图 避 罩 呈 故 十 外 < 
Elements Resources Network Scripts Timeline Profiles Audits Console Search Console 
> function f () {local = 2} 

indefined 
> local; 
四 ReferenceError: local is not defined 
> 4 

undefined 
> local; 

2 
> 


国 | 污 QI <topframe> | 下 Errors Warnings Logs 和] 


图 3-2 

让 我 们 来 看 看 上 面 究竟 发 生 了 些 什 么 。 首 先 ， 我 们 在 函数 f0 中 定 
义 了 一 个 变量 local。 在 该 函数 被 调用 之 前 ， 这 个 变量 是 不 存在 的 。 该 
变量 会 在 函数 首次 被 调用 时 创建 ， 并 被 赋予 全 局 作用 域 。 这 使 得 我 们 
可 以 在 该 函数 以 外 的 地 方 访问 它 。 

最 佳 实践 

尽量 将 全 局 变量 的 数量 降 到 最 低 ， 以 避免 命名 冲突 。 因 为 如 果 有 
两 个 人 在 同一 段 脚 本 的 不 同 函 数 中 使 用 了 相同 的 全 局 变量 名 ， 就 很 容 
易 导 致 不 可 预测 的 结果 和 难以 察觉 的 bug 。 

最 好 总 是 使 用 var 语句 来 声明 变量 。 

可 以 考虑 使 用 “单一 va 模式 ， 即 ， 仅 在 函数 体内 的 第 一 行使 用 一 
个 var 来 定义 这 个 作用 域 中 所 有 需要 的 变量 。 这 样 一 来 ， 我 们 就 能 很 轻 
松 地 找到 相关 变量 的 定义 ， 并 且 在 很 大 程度 上 避免 了 不 小 心 污染 全 局 
变量 的 情况 。 


变量 提升 


下 面 ， 我 们 再 来 看 一 个 很 有 趣 的 例子 ， 它 显示 了 关于 局 部 和 全 局 
作用 域 的 另 一 个 重要 问题 。 

Var a = 123; 

function fO { 

alert(a); 
vara=1; 
alert(a); 

} 

f(); 

您 可 能 会 想当然 地 认为 alert0 第 一 次 显示 的 是 123 (也 就 是 全 局 变 
量 a 的 值 ) ， 而 第 二 次 显示 的 是 1 ( 即 局 部 变量 a) 。 但 事实 并 非 如 
此 ， 第 一 个 alert0 实 际 上 显示 的 是 undefined， 这 是 因为 函数 域 始终 优先 
于 全 局 域 ， 所 以 局 部 变量 a 会 覆盖 掉 所 有 与 它 同 名 的 全 局 变量 ， 尽 管 在 
alert0 第 一 次 被 调用 时 ，a 还 没有 被 正式 定义 〈 即 该 值 为 undefined) ， 
但 该 变量 本 号 已 经 存在 于 本 地 空间 了 。 这 种 特殊 的 现象 叫做 提升 

(hoisting) 。 

也 就 是 说 ， 当 JavaScript 执行 过 程 进 入 新 的 函数 时 ， 这 个 函数 内 被 
声明 的 所 有 变量 都 会 被 移动 〈 或 者 说 提升 ) 到 函数 最 开始 的 地 方 。 这 
个 概念 很 重要 ， 必 须 牢 记 。 另 外 需要 注意 的 是 ， 被 提升 的 只 有 变量 的 
声明 ， 这 意味 着 ， 只 有 男 数 体内 声明 的 这 些 变量 在 该 函数 执行 开始 时 
束 存 在 ， 而 与 之 相关 的 赋值 操作 并 不 会 被 提升 ， 它 还 在 其 原来 的 位 置 
上 。 艾 如 在 前 面 的 例子 中 ， 局 部 变量 本 身 被 提升 到 了 函 数 开 始 处 ， 但 
并 没有 在 开始 处 吏 被 赋值 为 1。 

那个 例子 可 以 被 等 价 地 改写 为 : 


Var a = 123; 


function fO { 


var a; // same as: var a = undefined:; 


alert(a); / undefined 
a=1; 
alert(a); // 1 
} 
当然 ， 我 们 也 可 以 采用 在 最 佳 实践 中 提 到 过 的 单一 var 模 式 。 在 这 
个 例子 中 ， 我 们 可 以 手动 提升 变量 声明 的 位 置 ， 这 样 一 来 代码 就 不 会 
被 JavaScript 的 提升 行为 所 混淆。 


3.4 辑 数 也 是 数据 


在 JavaScript 中 ， 函 数 实际 上 也 是 一 种 数据 。 这 概念 对 于 我 们 日 后 
的 学 习 至 天 重要 。 也 就 是 说 ， 我 们 可 以 把 一 个 函数 赋值 给 一 个 变量 。 

var f = function() { 

return 1; 

上 
上 面 这 种 定义 方式 通常 被 叫做 芳 数 标识 记 法 (function literal 
notation) 

functionO{ return 1;} 是 一 个 函数 表达 式 。 函 数 表达 式 可 以 被 命名 ， 
称 为 命名 函数 表达 式 (named function expression，NFE) 。 所 以 以 下 这 
种 情况 也 是 合法 的 ， 虽 然 我 们 不 常常 用 到 〈 在 这 里 ，myFunc 是 函数 的 
名 字 ， 而 不 是 变量 ; 下 会 错误 地 创建 f 和 myFunc 两 个 变量 上) : 


varf= function myFunc() { 


return 1; 
}; 
这 样 看 起 来 ， 似 乎 命名 函数 表达 式 与 贸 数 声明 没有 什么 区 别 。 但 
它们 其 实 古 不 同 的 。 两 者 的 差别 表现 于 它们 所 在 的 上 下 文 。 函 数 声明 


只 会 出 现在 程序 代码 里 (在 男 一 个 函数 的 函数 体 中 ， 或 者 在 程序 主体 
中 ) 。 本 书 的 后 续 章 节 会 有 更 多 的 举例 来 阐明 这 些 概念 。 
如 果 我 们 对 函数 变量 调用 typeof ， 操 作 符 返回 的 字符 串 将 会 


是 "function"。 


> function define() { 
return 1; 
} 

> var express = function () { 
return 1; 

}; 

> typeof define; 

"function" 

> typeof express; 

"function" 

ee 数 也 是 一 种 数据 ， 只 不 过 这 种 特殊 的 数据 
类 型 有 两 个 重要 的 特性 

它们 所 包含 的 是 代码 。 

它们 是 可 执行 的 (或 者 说 是 可 调用 的 ) 。 

和 我 们 之 前 看 到 的 一 样 ， 要 调用 某 个 函数 ， 只 需要 在 它 的 名 字 后 
面 加 一 对 括号 即 可 。 我 们 绸 来 看 一 个 示例 ， 下 面 这 段 代 码 工 作 与 困 数 
的 定义 方式 无 关 ， 它 演示 的 是 如 何 像 变量 那样 使 用 函数 一 一 也 就 是 
说 ,我们 可 以 将 它 找 贝 给 不 同 的 变量 


> var sum = function(a, b) { 


return a + b; 
}; 
> var add = sum; 


> typeof add; 


"function" 

> add(1, 2); 

3 

由 于 函数 也 是 赋值 给 变量 的 一 种 数据 ， 所 以 函数 的 命名 规则 与 一 
般 变 量 相同 一 一 即 函 数 名 不 能 以 数字 开头 ， 并 且 可 以 由 任意 的 字母 、 
数字 、 下 划 线 和 美元 符号 组 合 而 成 。 


3.4.1 匿名 图 数 


正如 您 所 知 ， 我 们 可 以 这 样 定义 一 个 函数 : 


var f = function(a){ 


return a; 

上 

通过 这 种 方式 定义 的 函数 常 被 称 为 匿名 函数 〈《 即 没有 名 字 的 画 
数 ) ， 特 别 是 当 它 不 被 赋值 给 变量 单独 使 用 的 时 候 。 在 这 种 情况 下 ， 
此 类 函数 有 两 种 优雅 的 用 法 : 

您 可 以 将 匿名 函数 作为 参数 传递 给 其 他 函数 ， 这 样 ， 接 收 方 函数 
区 能 利用 我 们 所 传递 的 函数 来 完成 某 些 事情 。 

您 可 以 定义 某 个 匿名 函数 来 执行 某 些 一 次 性 任务 。 

接 下 来 ， 我 们 来 看 两 个 具体 的 应 用 示例 ， 通 过 其 中 的 细 克 来 进 一 
步 了 解 匿名 函数 。 


既然 画 数 与 任何 可 以 被 赋值 给 变量 的 数据 是 相同 的 ， 那 么 它 当 然 
可 以 像 其 他 数据 那样 被 定义 、 删 除 、 拷 贝 ， 以 及 当成 参数 传递 给 其 他 
画 数 。 


在 下 面 的 示例 中 ， 我 们 定义 了 一 个 函数 ， 这 个 函数 有 了 两 个 芳 数 类 
型 的 参数 ， 然 后 它 会 分 别 执行 这 两 个 参数 所 指向 的 函数 ， 并 返回 它们 
的 返回 值 之 和 。 

function invokeAdd(a, b){ 

return a() + b(); 
} 
下 面 让 我 们 来 简单 定义 一 下 这 两 个 参与 加 法 运算 的 函数 〈 使 用 男 
数 声 明 模 式 ) ， 它 们 只 是 单纯 地 返回 一 个 固定 值 : 
function one() { 
return 1; 

} 

function two() { 
return 2; 

} 

现在 ， 我 们 只 需 将 这 两 个 函数 传递 给 目标 函数 invokeAdd0， 就 可 
以 得 到 执行 结果 了 : 

> invokeAdd(one, two); 

3 

事实 上 ， 我 们 也 可 以 直接 用 匿名 函数 〈 即 函数 表达 式 ) 来 代替 
one() 和 和 two()， 以 作为 目标 函数 的 参数 ， 例 如 : 

> invokeAdd(function () {return 1; }, function () {return 2; }); 

3 

或 许 ， 我 们 可 以 换 一 种 可 读 性 更 高 的 写法 : 

> invokeAdd( 

function () { return 1; }, 


function () { return 2; } 


) 


3 
当然 ， 您 也 可 以 这 样 写 : 
> invokeAdd( 
function () { 
return 1; 
和 
function () { 
return 2; 
} 
); 
3 
当 我 们 将 函数 A 传 递 给 函数 B， 并 由 B 来 执行 A 时 ，A 丈 成 了 一 个 回 
调 函 数 (callback functions) 。 如 果 这 时 A 还 是 一 个 无 名 函数 ， 我 们 就 
称 它 为 匿名 回调 函数 。 
那么 ， 应 该 什么 时 候 使 用 回调 函数 呢 ? 下 面 我 们 将 通过 几 个 应 用 
实例 来 示范 下 回调 函数 的 优势 ， 包 括 : 
它 可 以 让 我 们 在 不 做 命名 的 情况 下 传递 函数 《这 意味 着 可 以 节省 
变量 名 的 使 用 ) 。 
我 们 可 以 将 一 个 函数 调用 操作 委托 给 另 一 个 函数 (这 意味 着 可 以 
节省 一 些 代码 编写 工作 ) 。 
它们 也 有 助 于 提升 性 能 。 


3.4.3 回调 示例 


在 编程 过 程 中 ， 我 们 通常 需要 将 一 个 函数 的 返回 值 传递 给 男 一 个 
男 数 。 在 下 面 的 例子 中 ， 我 们 定义 了 两 个 范 数 : 第 一 个 是 
multiplyByTwo0 ， 该 函数 会 通过 一 个 循环 将 其 所 接受 的 三 个 参数 分 别 


乘 以 2， 并 以 数组 的 形式 返回 结果 第 二 个 函数 addoneO 只 接受 一 个 
值 ， 然 后 将 它 加 1 并 返回 。 
function multiplyByTwo(a, b, c) { 
var i, ar = [j:; 
for(i = 0;i< 3; i++){ 
ar[j] = arguments[i] * 2; 
} 
return ar; 
} 
function addOne(a) { 
returna+t+1; 
} 
现在 ， 我 们 来 测试 一 下 这 两 个 芳 数 ， 结 果 如 下 : 
> multiplyByTwo!(1, 2, 3); 
[2, 4, 6] 
> addOne(100); 
101 
授 下 来 ， 假 设 我 们 有 三 个 元 素 ， 我 们 要 实现 这 三 个 元 素 在 两 个 函 
数 之 间 的 传递 。 这 需要 定义 男 一 个 数组 ， 用 于 存储 来 自 第 一 步 的 结 
果 。 我 们 先 从 multiplyByTwo() 的 调用 开始 : 


> var myarr = []; 


> myarr = multiplyByTwo(10, 20, 30); 

[20, 40, 60] 

然后 ， 用 循环 志 历 每 个 元 素 ， 并 将 它们 分 别传 递 给 addOne0。 
>for (vari= 0;i<3;i+t+){ 


myarr[li] = addOne(myarr[i]); 


> myarr; 

[21, 41, 61] 

如 您 所 见 ， 这 段 代码 可 以 工作 ， 但 是 显然 还 有 一 定 的 改善 空间 。 
特别 是 这 里 使 用 了 两 个 循环 ， 如 采 数 据 量 很 大 或 循环 操作 很 复杂 的 
话 ， 开 销 一 定 不 小 。 因 此 ， 我 们 需要 将 它们 合 二 为 一 。 这 就 需要 对 
multiplyByTwo0) 函 数 做 一 些 改动 ， 使 其 接受 一 个 回调 函数 ， 并 在 每 次 
迄 代 操作 中 调用 它 。 上 有 具体 如 下 : 

function multiplyByTwol(a, b, c, callback) { 


var i, ar = [j; 
for(i = 0;i< 3; i++){ 
ar[j] = callback(arguments[i] * 2); 
} 
return ar; 
} 
函数 修改 完成 之 后 ， 之 前 的 工作 只 需要 一 次 函数 调用 就 够 了 ， 我 
们 只 需 像 下 面 这 样 同时 将 初始 值 和 回调 函数 传递 给 它 
> myarr = multiplyByTwo(1, 2, 3, addOne); 
[3, 5, 7] 
同样 ， 我 们 还 可 以 用 匿名 函数 来 代 奉 addone0， 这 样 做 可 以 和 省 一 
个 额外 的 全 局 变量 。 
> ImultiplyByTwo(1, 2, 3, function (a){ 
returnat+1; 
}); 
[3, 5, 7] 
而 且 ， 使 用 匿名 函数 也 更 易于 随时 根据 需求 调整 代码 。 例 如 : 
> multiplyByTwo(1, 2, 3, function(a){ 


returna+2; 


[4, 6, 8] 


3.4.4 即时 男 数 


目前 我 们 已 经 讨论 了 匿名 函数 在 回调 方面 的 应 用 。 接 下 来 ， 我 们 
来 看 匿名 函数 的 另 一 个 应 用 示例 一 一 这 种 函数 可 以 在 定义 后 立即 调 
用 * 比 如: 
( 
function(){ 
alert('boo'); 
} 
)0; 
这 种 语法 看 上 去 有 点 吓人 ， 但 其 实 很 简单 一 一 我 们 只 需 将 匿名 函 
数 的 定义 放 进 一 对 括号 中 ， 然 后 外 面 再 紧 跟 一 对 括号 即 可 。 其 中 ， 第 
二 对 括号 起 到 的 是 “立即 调用 ”的 作用 ， 同 时 它 也 是 我 们 向 匿名 函数 传 
递 参数 的 地 方 。 
( 


function(name){ 


alert('Hello ' + name + "!"); 

} 
)( dude'); 
男 外 ， 您 也 可 以 将 第 一 对 括号 闭合 于 第 二 对 括号 之 后 。 这 两 种 做 

法 都 有 效 。 

(function () { 

// ... 
】 


// vs. 
(functioin (0 { 
J 

DO; 

使 用 即时 ( 自 调 ) 匿名 函数 的 好 处 是 不 会 产生 任何 全 局 变量 。 当 
然 ， 据点 在 于 这 样 的 本 数 是 无 法 重复 拟 行 的 《除非 您 将 它 放 在 菜 个 和 
环 或 其 他 函数 中 ) 。 这 也 使 得 即时 函数 非常 适合 于 执行 一 些 一 次 性 的 
或 初始 化 的 任务 。 

如 果 需 要 的 话 ， 即 时 函数 也 可 以 有 返回 值 ， 虽 然 并 不 常见 


var result = (function () { 


// something complex with 
// temporary local variables... 
Ka 
// return Something; 
}0); 
当然 在 这 个 例子 中 ， 将 整个 范 数 表达 式 用 括号 包 起 来 是 不 必要 
的 ， 我 们 只 要 在 函数 最 后 使 用 一 对 括号 来 执行 这 个 函数 即 可 。 所 以 上 
例 又 可 以 改 为 : 


var result = function () { 


// something complex with 
// temporary local variables... 
// return Something; 
}0; 
虽然 这 种 写法 也 有 效 ， 但 可 读 性 就 毕竟 稍微 差 了 点 : 不 读 到 最 
后 ， 你 就 无 法 知道 result 到 压 古 一 个 画 数 ， 还 是 一 个 即时 函数 的 返回 
值 。 


3.4.5 内 部 〈 私 有 ) 男 


想必 我 们 都 记得 ， 男 数 与 其 他 类 型 的 值 本 质 上 十 一 样 的 ， 因 此 ， 
没有 什么 理由 可 以 阻止 我 们 在 一 个 轴 数 内 部 定义 鸡 一 个 函数 。 

function outer(param) { 

function inner(theinput) { 

return theinput * 2; 

} 

return "The result is ' + inner(param); 
} 
我 们 也 可 以 改 用 函数 标识 记 法 来 写 这 段 代码 : 


var outer = function (param) { 


var inner = function (theinput) { 
return theinput * 2; 
}; 
return "The result is ' + inner(param); 
上 
当 我 们 调用 全 局 函数 outer0 时 ， 本 地 函数 inner0 也 会 在 其 内 部 被 
调用 。 由 于 inner0 是 本 地 函数 ， 它 在 outer0 以 外 的 地 方 是 不 可 见 的 ， 所 
以 我 们 也 能 将 它 称 为 私有 函数 。 
> outer(2); 
"The result is 4" 
> outer(8); 
"The resultis 16" 
> inner(2); 
ReferenceError: inner is not defined 


使 用 私有 函数 的 好 处 主要 有 以 下 几 操 : 


有 助 于 我 们 确保 全 局 名 字 空 间 的 纯净 性 (这 意味 着 命名 冲突 的 机 
会 很 小 ) 。 

确 你 私有 性 一 一 这 使 我 们 可 以 选择 只 将 一 些 必要 的 函数 骏 露 给 “外 
部 世界 ”， 而 保留 属于 目 己 的 函数 ， 使 它们 不 为 该 应 用 程序 的 其 他 部 分 
所 用 


3.4.6 返回 函数 的 函数 


正如 之 前 所 提 到 的 ， 函 数 始终 都 会 有 一 个 返回 值 ， 即 便 不 是 显 式 
返回 ， 它 也 会 隐 式 返回 一 个 undefined。 既 然 函 数 能 返回 一 个 唯一 值 ， 
那么 这 个 值 就 也 有 可 能 是 为 一 个 芳 数 。 例 如 : 

function a() { 

alert( A!'); 

return function(){ 
alert('B!'); 

bs; 

} 

在 这 个 例子 中 ， 画 数 a0 会 在 执行 它 的 工作 (弹出 'A!') 之 后 返回 另 
一 个 函数 。 而 所 返回 的 函数 又 会 去 执行 另外 一 些 事 情 (弹出 'Br) 。 我 
们 只 需 将 该 返回 值 赋值 给 某 个 变量 ， 然 后 束 可 以 像 使 用 一 般 函 数 那样 
调用 它 了 。 


> Var newFunc = a(); 


> newFunc(); 

如 您 所 见 ， 上 面 第 一 行 执 行 的 是 alert(A!)， 第 二 行 才 是 alert 
(B!)° 

如 果 您 想 让 返回 的 函数 立即 执行 ， 也 可 以 不 用 将 它 赋 值 给 变量 ， 
直接 在 该 调用 后 面 再 加 一 对 括号 即 可 ， 效 果 是 一 样 的 : 


> a0)0; 
3.4.7 能 重 写 目 己 的 函数 


由 于 一 个 函数 可 以 返回 另 一 个 函数 ， 因 此 我 们 可 以 用 新 的 函数 来 
黎 凋 旧 的 。 例 如 在 之 前 的 例子 中 ， 我 们 也 可 以 通过 a0 的 返回 值 来 重 写 
a0 函 数目 己 : 

>a=al; 

当前 这 名 依然 只 会 执行 alert (A!)， 但 如 果 我 们 再 次 调用 a()， 它 就 
会 执行 alert ('B!') 了 。 这 对 于 要 执行 某 些 一 次 性 初始 化 工作 的 函数 来 说 
会 非常 有 用 。 这 样 一 来 ， 该 国 数 可 以 在 第 一 次 被 调用 后 重 写 目 己 ， 从 
而 避免 了 每 次 调用 时 重复 一 些 不 必要 的 操作 。 

在 上 面 的 例子 中 ， 我 们 是 在 外 面 来 重 定义 该 函数 的 一 一 即 我 们 将 
洲 数 返回 值 赋值 给 函数 本 映 。 但 我 们 也 可 以 让 函数 从 内 部 重 写 上 自己 。 
例如 : 

function a() { 

alert('A!'); 

a = function(){ 
alert('B!'); 

} 

} 

这 样 一 来 ， 当 我 们 第 一 次 调用 该 函数 时 会 有 如 下 情况 发 生 。 

alert ('A!") 将 会 被 执行 (可 以 视 之 为 一 次 性 的 准备 操作 ) 。 

全 局 变量 a 将 会 被 重 定 义 ， 并 被 赋予 新 的 函数 。 

而 如 果 该 函数 再 被 调用 的 话 ， 被 执行 的 束 将 是 alert (B!) 了 。 

下 面 ， 我 们 来 看 一 个 组 合 型 的 应 用 示例 ， 其 中 有 些 技术 我 们 将 会 
在 本 章 最 后 几 节 中 讨论 。 


vara= (function () { 

function someSetup O { 
var setup = 'done'; 

} 

function actual Work() { 
alert("Worky-worky'); 

} 

someSetup(); 


return actual Work:; 


}0); 
在 这 个 例子 中 有 如 下 情况 。 
我 们 使 用 了 私有 函数 一 someSetupO 〇 和 actualWork()。 


我 们 也 使 用 了 即时 函数 一 一 函数 a0 的 定义 后 面 有 一 对 括号 ， 因 此 
它 会 执行 目 调 。 

当 该 男 数 第 一 次 被 调用 时 ， 它 会 调用 someSetup()， 并 返回 函数 变 
量 actualWork 的 引用 。 请 注意 ， 返 回 值 中 是 不 带 括 号 的 ， 因 此 该 结果 仅 
仅 古 一 个 函数 引用 ， 并 不 会 产生 范 数 调用 。 

由 于 这 里 的 执行 语句 是 以 var a = ... 开 头 的 ， 因 而 该 自 调 函 数 所 返 
回 的 值 会 重新 赋值 给 a 。 

如 末 我 们 想 测 试 一 下 目 己 对 上 述 内 容 的 理解 ， 可 以 竹 试 回答 一 下 
这 个 问题 ， 上 面 的 代码 在 以 下 情景 中 分 别 会 alert() 什 么 内 容 ? 

当 它 最 初 被 载 入 时 。 

之 后 再 次 调用 a0 时 。 

这 项 技术 对 于 某 些 浏览 大 相关 的 操作 会 相当 有 用 。 因 为 在 不 同 训 
览 亏 中 ， 实 现 相同 任务 的 方法 可 能 是 不 同 的 ， 我 们 都 知道 浏览 夯 的 特 
性 不 可 能 因为 琅 数 调用 而 发 生 任何 改变 ， 因 此 ， 最 好 的 选择 就 是 让 函 
数 根据 其 当前 所 在 的 浏览 器 来 重 定 义 目 己 。 这 殊 是 所 谓 的 “浏览 如 兼容 


性 探测 技术， 关于 这 方面 的 应 用 示例 ， 我 们 会 在 本 书后 面 的 章节 中 给 
平展 未” 


3.5 闭 包 


在 本 章 剩 下 的 部 分 中 ， 我 们 来 谈 谈 闭 包 〈 正 好 用 来 关闭 本 章 _9 
) 。 闭 包 这 个 概念 最 初 接触 起 来 是 有 一 定 难度 的 ， 所 以 即使 您 在 首次 
阅读 中 没 能 “ 抓 住 "重点 ， 也 大 可 不 必 感 到 灰心 丧气 。 后 续 章 节 中 还 有 
大 量 的 实例 可 供 您 去 慢 慢 理解 它们 ， 所 以 ， 如 有 果 您 觉得 现在 没有 完全 
理解 ， 可 以 在 以 后 涉及 相关 话题 时 再 回 过 头 来 看 看 这 部 分 内 容 。 

在 我 们 讨论 闭 包 之 前 ， 最 好 先 来 回顾 一 下 JavaScript 中 作用 域 的 概 
念 ， 然 后 再 进行 菏 些 话题 扩展 。 


3.5.1 作用 域 链 


如 您 所 知 ， 尽 管 JavaScript 中 不 存在 大 括号 级 的 作用 域 , 但 它 有 部 
数 作用 域 ， 也 融 是 说 ， 在 某 函 数 内 定义 的 所 有 变量 在 该 函 数 外 是 不 可 
见 的 。 但 如 有 果 该 变量 是 在 某 代 人 码 块 中 被 定义 的 (如 在 某 个 让 或 for 语 句 
中 ) ， 那 它 在 代码 块 外 是 可 见 的 。 


>vara=1; 


> function f() { 
varb=1:; 
return a; 

} 

> £0; 

1 

> b; 


ReferenceError: b is not defined 


在 这 里 ， 变 量 a 是 属于 全 局 域 的 ， 而 变量 b 的 作用 域 束 在 函数 f0 内 


了 所 以 : 
在 fO 内 ，a 和 b 都 是 可 见 的 ; 
在 f0) 外 ，a 是 可 见 的 ，b 则 不 可 见 。 


在 下 面 的 例子 中 ， 如 采 我 们 在 函数 outer0 中 定义 了 画 一 个 函数 
inner0， 那 么 ， 在 inner(O0 中 可 以 访问 的 变量 既 来 目 它 目 寻 的 作用 域 ， 也 
可 以 来 自 其 “ 父 级 ”作用 域 。 这 就 形成 了 一 条 作用 域 链 (scope chain) ， 


该 链 的 长 度 (或 深度 ) 则 取决 于 我 们 的 需要 。 
var global = 1; 
function outer(){ 
var outer_local = 2; 
function inner() { 
var inner_local = 3; 


return inner_local + outer_ local + global; 


} 
return inner(); 
} 
现在 让 我 们 来 测试 一 下 inner0 是 否 真 的 可 以 访问 所 有 变量 : 
> outer(); 
6 


3.5.2 利用 闭 包 突破 作用 域 链 


现在 ， 让 我 们 先 通 过 图 示 的 方式 来 介绍 一 下 财 包 的 概念 。 让 我 们 


通过 这 段 代 码 了 解 其 中 奥秘 。 


var a = "global variable"; 


var F = function O { 
var b = "]ocal variable"; 
var N = function () { 
var Cc = "inner local"; 
由 
}; 
首先 当然 就 是 全 局 作用 域 G， 我 们 可 以 将 其 视 为 包含 一 切 的 宇宙 。 


You are here 


其 中 可 以 包含 各 种 全 局 变量 (如 al，a2) 和 函数 (如 F) 。 


每 个 函数 也 都 会 拥有 一 块 属于 目 己 的 私 用 空间 ， 用 以 存储 一 些 别 
的 变量 (例如 b) 以 及 内 部 函数 (例如 N) 。 所 以 ， 我们 最 终 可 以 把 示 
意图 画 成 这 样 。 


在 上 疼 中 ， 如 有 我 们 在 a 点 ， 那 么 吏 位 于 全 局 至 间 中 。 而 如 果 是 在 
pb 点 ， 我 们 束 在 函数 F 的 鹤 间 里 ， 在 这 里 我 们 既 可 以 访问 全 局 空间 ， 也 
可 以 访问 F 空 间 。 如 末 我 们 在 c 态 ， 那 整 位 于 函数 N 中 ， 我 们 可 以 访问 的 

空间 包括 全 局 空间 、F 空 间 和 NN 空间。 其 中 ，a 和 b 之 间 是 不 连通 的 ， 因 
为 b 在 F 以 外 是 不 可 见 的 。 但 如 果 愿 意 的 话 ， 我 们 是 可 以 将 c 氮 和 b 点 连 
通 起 来 的 ， 或 者 说 将 N 与 b 连 通 起 来 。 当 我 们 将 N 的 空 人 
并 止步 于 全 局 空间 以 内 时 ， 束 产生 了 一 件 有 趣 的 东 


知道 接 下 来 会 发 生 什么 吗 ? N 将 会 和 a 一 样 置身 于 全 局 空间 。 而 且 
由 于 函数 还 记得 它 在 被 定义 时 所 设 定 的 环境 ， 因 此 它 依然 可 以 访问 F 空 
间 并 使 用 b。 这 很 有 趣 ， 因 为 现在 N 和 a 同 处 于 一 个 空间 ， 但 N 可 以 访问 
b， 而 a 不 能 。 

那么 ，N 究竟 是 如 何 突破 作用 域 链 的 呢 ? 我 们 只 需要 将 它们 升级 
为 全 局 变量 (不 使 用 var 语 句 ) 或 通过 F 传 递 (或 返回 ) 给 全 局 空间 即 
可 。 下 面 ， 我 们 来 看 看 具体 是 怎么 做 的 。 

3.5.2.1 闭 包 机 


百 先 ， 我 们 先 来 看 一 个 范 数 。 这 个 钞 数 与 之 前 所 拉 述 的 一 样 ， 只 


不 过 在 F 中 多 了 返回 N， 而 在 函数 N 中 多 了 返回 变量 b，N 和 b 都 可 通过 作 
用 域 链 进行 访问 。 


var a = "global variable"; 
var F = function () { 
var b = "local variable"; 
var N = function O { 
var Cc = "inner local"; 
return b; 
}; 
return N; 
}; 
玉 数 F 中 包含 了 局 部 变量 b， 因 此 后 者 在 全 局 空间 里 是 不 可 见 的 。 
> b; 
ReferenceError: b is not defined 


函数 N 有 目 己 的 私有 至 间 ， 同 时 也 可 以 访问 名 的 空间 和 全 局 至 间 ， 


所 以 b 对 它 来 说 是 可 见 的 。 因 为 FO 是 可 以 在 全 局 空间 中 被 调用 的 〈 它 是 
一 个 全 局 函数 ) ， 所 以 我 们 可 以 将 它 的 返回 值 赋值 给 另 一 个 全 局 变 


三 = 


里 ， 


从 而 生成 一 个 可 以 访问 FO 私 有 空间 的 新 全 局 函数 。 

> var inner = 下 (); 

> inner(); 

"Jocal variable" 

3.5.2.2 闭 包 #2 

下 面 这 个 例子 的 最 终结 来 与 之 前 相同 ， 但 在 实现 方法 上 存在 一 些 


细微 的 不 同 。 在 这 里 FO 不 再 返回 画 数 了 ， 而 是 直接 在 函数 体内 创建 一 
个 新 的 全 局 函数 inner0 。 


首先 ， 我 们 需要 声明 一 个 全 局 函数 的 占 位 符 。 尽 管 这 种 占 位 符 不 
苹 必 须 的 ， 但 最 好 还 是 声明 一 下 ， 然 后 ， 我 们 殊 可 以 将 钞 数 FO) 定义 如 
下 : 


var inner; // placeholder 


var F = function (){ 
var b = "local variable"; 
var N = function () { 
return b; 
上 
inner = N; 
}; 
现在 ， 请 读者 目 行 尝试 ，F(O) 补 调用 时 会 发 生 什么 : 
> 上 (Wi 
我 们 在 FO 中 定义 了 一 个 新 的 函数 NO ， 并 且 将 它 赋值 给 了 全 局 变 
量 inner。 由 于 NO 是 在 FO 内 部 定义 的 ， 它 可 以 访问 FO 的 作用 域 ， 所 以 
即使 该 男 数 后 来 升级 成 了 全 局 函数 ， 但 它 依然 可 以 保留 对 FO 作 用 域 的 
访问 权 。 


> inner(); 


"local variable". 

3.5.2.3 相关 定义 与 闭 包 #3 

事实 上 ， 每 个 函数 都 可 以 被 认为 是 一 个 财 包 。 因 为 每 个 函数 都 在 
其 所 在 域 〈 即 该 函数 的 作用 域 ) 中 维护 了 某 种 私有 联系 。 但 在 大 多 数 
时 候 ， 该 作用 域 在 函数 体 执 行 完 之 后 就 自行 销毁 了 一 一 除非 发 生 一 些 
有 趣 的 事 《比如 像 上 一 人 小节 所 述 的 那样 ) ， 导 致 作 用 域 被 保持 。 

根据 目前 的 讨论 ， 我 们 可 以 说 ， 如 采 一 个 国 数 会 在 其 父 级 函数 返 
回 之 后 留 住 对 父 级 作用 域 的 链接 的 话 外. ， 相 关闭 包 就 会 被 创建 起 来 。 


但 其 实 每 个 函数 本 身 束 是 一 个 团 包 ， 因 为 每 个 贸 数 至 少 都 有 访问 全 局 
人 
让 我 们 再 来 看 一 个 财 包 的 例子 。 这 次 我 们 使 用 的 十 函数 参数 
(function parameter) 。 该 参数 与 函数 的 局 部 变量 没什么 不 同 ， 但 它们 
是 隐 式 创建 的 ( 即 它 们 不 需要 使 用 var 来 声明 ) 。 我 们 在 这 里 创建 了 一 
个 函数 ， 该 玉 数 将 返回 一 个 子 画 数 ， 而 这 个 子 画 数 返 回 的 则 是 其 父 函 
数 的 参数 : 
function F(param) { 
var N = function(){ 
return param; 
下 
param++; 
return N; 
} 
然后 我 们 可 以 这 样 调用 它 : 
> var inner = F(123); 
> inner(); 
124 
请 注意 ， 当 我 们 的 返回 函数 被 调用 时 ，param++ 已 经 执行 过 一 
次 递增 操作 了 “。 所 以 inner0 返 回 的 是 更 新 后 的 值 。 由 此 我 们 可 以 看 出 ， 
国 数 所 绑 定 的 是 作用 域 本 号 ， 而 不 是 在 函数 定义 时 该 作用 域 中 的 变量 
或 变量 当前 所 返回 的 值 。 
3.5.2.4 循环 中 的 闭 包 
接 下 来 ， 让 我 们 来 看 看 新 手 们 在 闭 包 问 题 上 会 犯 哪 些 典 型 的 错 
毕竟 由 闭 包 所 导致 的 pug 往 往 很 难 被 发 现 ， 因 为 它们 总 是 表面 上 看 
ai: 切 正常 。 


让 我 们 来 看 一 个 三 次 的 循环 操作 ， 它 在 每 次 友 代 中 都 会 创建 一 个 
返回 当前 循环 序号 的 新 函数 。 该 新 函数 会 被 添加 到 一 个 数组 中 ， 并 最 
终 返 回 。 具 体 代码 如 下 : 

function FO { 

var arr = [], i: 
for (i= 0;i<3;it+){ 
arr[i] = function () { 
return ji 
上 
} 
return arr; 

} 

下 面 ， 我 们 来 运行 一 下 函 数 ， 并 将 结果 赋值 给 数组 arr。 

> var arr = F(); 

现在 ， 我 们 拥有 了 一 个 包公 三 个 函数 的 数组 。 您 可 以 通过 在 每 个 
数组 元 聚 后 面 加 一 对 括号 来 调用 它们 。 按 通 滑 的 佑 计 ， 它 们 应 该 会 依 
照 循环 顺序 分 别 输出 0、1 和 2， 下 面 就 让 我 们 来 试 试 : 

> arr[0](); 

3 

> arr[1]0; 

3 

> arr[2]0; 

3 

显然 ， 这 并 不 是 我 们 想 要 的 结果 。 究 竟 是 怎么 回 事 呢 ? 原 来 我 们 
在 这 里 创建 了 三 个 闭 包 ， 而 它们 都 指向 了 一 个 共同 的 局 部 变量 i。 但 
是 ， 闭 包 并 不 会 记录 它们 的 值 ， 它 们 所 拥有 的 只 是 相关 域 在 创建 时 的 
一 个 连接 ( 即 引 用 ) 。 在 这 个 例子 中 ， 变 量 i 恰巧 存在 于 定义 这 三 个 画 


数 域 中 。 对 这 三 个 函数 中 的 任何 一 个 而 言 ， 当 它 要 去 获取 某 个 变量 
时 ， 它 会 从 其 所 在 的 域 开 始 逐 级 寻找 那个 距离 最 近 的 i 值 。 由 于 循环 结 
束 时 i 的 值 为 3， 所 以 这 三 个 函数 都 指 癌 了 这 一 共同 值 。 

为 什么 结果 是 3 不 是 2 昵 ? 这 也 是 一 个 值得 思考 的 问题 ， 它 能 帮助 
您 更 好 地 理解 for 循 环 ， 请 您 目 行 思考 。 

那么 ， 应 该 如 何 纠正 这 种 行为 呢 ? 答案 是 换 一 种 财 包 形式 : 

function F() { 


var arr = [], ii 
for(i = 0; i< 3; i++){ 
arr[i] = (function (x){ 
return function () { 
return x; 
} 
}()); 

} 

return arr; 
} 
这 样 束 能 获得 我 们 预期 的 结果 了 : 
> var arr = F(); 
> arr[0]0; 
0 
> arr[11(); 
1 
> arr[2]0; 
2 
在 这 里 ， 我 们 不 再 直接 创建 一 个 返回 i 的 函数 了 ， 而 是 将 i 传 递 给 了 

另 一 个 即时 函数 。 在 该 函数 中 ，i 束 被 赋值 给 了 局 部 变量 x， 这 样 一 来 ， 


每 次 述 代 中 的 x 束 会 拥有 各 和 不 同 的 值 了 。 
或 者 ， 我 们 也 可 以 定义 一 个 “正常 点 的 ”内 部 函数 (不 使 用 即时 画 
数 ) 来 实现 相同 的 功能 。 要 点 是 在 每 次 迭代 操作 中 ， 我 们 要 在 中 间 画 
数 内 将 i 的 值 “ 本 地 化 ”。 
function F() { 
function binder(x) { 
return function(){ 
return x; 
上 
} 
var arr = [], ji 
for(i = 0;i< 3; i++){ 
arr[i] = binder(i); 
} 


return arr; 


3.5.3 getter 与 setter 


接 下 来 ， 让 我 们 再 来 看 两 个 关于 闭 包 的 应 用 示例 。 首 先是 创建 
getter 和 setter。 假设 现在 有 一 个 变量 ， 它 所 表示 的 是 某 类 特定 值 ， 或 
某 特定 区 间 内 的 值 。 我 们 不 想 将 该 变量 又 露 给 外 部 。 因 为 那样 的 话 ， 
其 他 部 分 的 代码 束 有 直接 修改 它 的 可 能 ， 所 以 我 们 需要 将 它 保护 在 相 
天 函数 的 内 部 ， 然 后 提供 两 个 额外 的 函数 一 一 一 个 用 于 获取 变量 值 ， 
另 一 个 用 于 给 变量 重新 赋值 。 并 在 函数 中 引入 某 种 验证 措施 ， 以 便 在 
赋值 之 前 给 予 变量 一 定 的 保护 。 另 外 ， 为 简洁 起 见 ， 我 们 对 该 类 中 的 
验证 部 分 进行 了 简化 : 即 这 里 只 处 理 数 字 值 。 


我 们 需要 将 getter 和 setter 这 两 种 函数 放 在 一 个 共同 的 函数 中 ， 并 
在 该 函数 中 定义 secret 变 量 ， 这 使 得 两 个 函数 能 够 共 部 同 一 作用 域 。 具 
体 代 码 如 下 : 

var getValue, setValue; 

(function() { 
Var secret = 0; 
getValue = function(){ 
return secret; 
上 
setValue = function (V) { 
if (typeof v === "number") { 
Secret = V; 
} 
上 

}0); 

在 这 里 ， 所 有 一 切 都 是 通过 一 个 即时 函数 来 实现 的 ， 我 们 在 其 中 
定义 了 全 局 函数 setValue0 和 getValue0 ， 并 以 此 来 确保 局 部 变量 secret 的 
不 可 直接 访问 性 。 

> getValue(); 

0 

> setValue(123); 

> getValue(); 

123 

> SetValue(false); 

> getValue(); 

123 


3.5.4 迭代 器 


在 最 后 一 个 关于 闭 包 应 用 的 示例 〈 这 也 是 本 章 的 最 后 一 个 示例 ) 
中 ， 我 们 将 同和 您 展示 闭 包 在 实现 欠 代 融 方 面 的 功能 

通 单 情况 下 ， 我 们 都 知道 如 何 用 循环 来 过 历 一 个 简单 的 数组 ， 但 
征 有 时 候 我 们 需要 面 对 更 为 复杂 的 数据 结构 ， 它 们 通 稼 会 有 着 与 数组 
截然 不 同 的 序列 规则 。 这 时 候 就 需要 将 一 些 “ 谁 是 下 一 个 ”的 复杂 逻辑 
封装 成 易于 使 用 的 next0 函 数 ， 然 后 ， 我 们 只 需要 简单 地 调用 next() 束 

能 实现 对 于 相关 的 过 历 操 作 了 。 

在 下 面 这 个 例子 中 ， 我 们 将 依然 通过 人 宙 单 数组 ， 而 不 是 复杂 的 效 
据 结 构 来 说 明 问 题 。 该 例子 是 一 个 接受 数组 输入 的 初始 化 函数 ， 我 们 
在 其 中 定义 了 一 个 私有 指针 i， 该 指针 会 始终 指向 数组 中 的 下 一 
素 。 


function setup(x) { 


vari= 0; 
return function(){ 
return X[i++j]; 
上 
} 
现在 ， 我 们 只 需 用 一 组 数据 来 调用 一 下 setup()， 束 可 创建 出 我 们 所 
需要 的 next() 函 数 ， 具 体 如 下 : 
> Var next = setup(['a', 'b', 'c']); 
这 是 一 种 既 简 单 又 好 玩 的 循环 形式 : 我 们 只 需 重 复 调用 一 个 函 
数 ， 就 可 以 不 停 地 获取 下 一 个 元 素 。 


> next(); 


we 


> next(); 


"DB™ 
> next(); 


WW 


3.6 小 结 


现在 ， 我 们 已 经 完成 了 对 于 JavaScript 画 数 的 基本 概念 介绍 ， 为 今 
后 学 习 JavaScript 的 面向 对 象 特性 ， 以 及 相关 的 现代 编程 模式 打下 了 一 
un ° 在 这 之 前 ， 我 们 一 直 在 刻意 回避 有 关 面 向 对 象 特性 的 内 

， 但 往 后 ， 本 书 将 市 您 深入 这 些 更 为 有 趣 的 内 容 。 下 面 ， 让 我 们 再 
来 一点 时 上 oi ce 
您 既 可 以 使 用 函数 声明 语法 ， 


也 可 以 使 用 nk 

人 罚 数 的 参数 及 其 灵活 性 。 

令 内 置 函数 一 一 包括 parseInt() 、parseFloat()、isNaN() 、isFiniteO 、 
A ei pn Ni 
这 些 变 量 没 有 大 括号 级 作用 


令 JavaScript 分 有 至 
域 , 但 它 有 函数 作用 域 以 及 相关 的 作用 大 。 

多 子 数 也 是 一 种 数据 一 一 即 范 数 可 以 跟 其 他 数据 一 样 被 赋值 给 一 

个 变量 ， 我 们 可 以 据 此 实现 大 量 有 趣 的 应 用 。 例 如 : 

私有 函数 和 私有 变量 

匿名 函数 。 

即时 函数 。 

能 重 写 目 生 的 函数 。 

令 闭 包 。 


3.7 练习 题 


1. 编写 一 个 将 十 六 进 制 值 转换 为 颜色 的 函数 ， 以 监 色 为 例 ， 
#0000FF 应 被 表 示 成 rgb(0,0,255) 的 形式 。 然 后 将 函数 命名 为 getRGB()， 
并 用 以 下 代码 进行 测试 。 提 示 : 可 以 将 字符 串 视 为 数组 ， 这 个 数组 的 
元 素 为 字符 。 

> var a = getRGB("#00FFO00"); 

>a; 

"rgb(0, 255, 0)" 

2. 如 果 在 控制 台中 执行 以 下 各 行 ， 分 别 会 输出 什么 内 容 ? 

> parseInt(1e1); 

> parseInt( 1el ); 

> parseFloat(1e1 ); 

> isFinite(0/10); 

> isFinite(20/0); 

> isNaN(parseInt(NaN)); 

3. 下 面 代码 中 ，alertO0 弹 出 的 内 容 会 是 什么 ? 

vara=1; 

function fO { 

function nO { 


alert(a); 


4. 以 下 所 有 示例 都 会 弹出 "Boo! "警告 框 ， 您 能 分 别 解释 其 中 原 
因 吗 ? 
4.1 


varf= alert; 
eval(f("Boo!")'); 
4.2 

Var e; 

varf= alert; 
eval('e=f')('Boo!"); 
4.3 

(function(){ 


return alert; } 


)0(Boo!); 


第 4 章 对 象 


到 目前 为 止 ， 我 们 已 经 了 解 了 JavaScript 中 的 基本 数据 类 型 、 数 组 
及 函数 ， 现 在 是 时 候 学 习 本 书 最 重要 的 一 部 分 内 容 一 对象 了 。 

在 这 一 章 中 ， 我 们 将 介绍 以 下 内 容 : 

如 何 创建 并 使 用 对 象 。 

什么 是 构造 器 函数 。 

JavaScript 中 的 内 置 对 象 及 其 运用 


4.1 从 数组 到 对 象 


正如 我 们 在 第 2 章 : 基本 数据 类 型 、 数 组 、 循 环 及 条 件 表 达 式 中 所 
介绍 的 ， 数 组 实际 上 吏 是 一 组 值 的 列表 。 该 列表 中 的 每 一 个 值 都 有 目 
己 的 索引 值 〈 即 数字 键 名 ) ， 索 引 值 从 0 开始 ， 依 次 递增 。 例 如 : 

> var myarr = [Ted,，Pblue',，yellow,，purple ']; 

> myarr; 

["red", "blue", "yellow", "purple"l; 

> myarr[0j; 

"red" 

> myarr[3]; 

"purple" 

如 果 我 们 将 索引 键 单独 排 成 一 列 ， 再 把 对 应 的 值 排 成 男 一 列 ， 整 
会 列 出 这 样 一 个 键 / 值 表 ， 如 表 4-1 所 示 。 


表 4-1 


索引 键 对 应 值 


red 


blue 


yellow 
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purple 


事实 上 ， 对 象 的 情况 跟 数 组 很 相似 ， 唯 一 的 不 同 是 它 的 键 值 类 型 
是 目 定 义 的 。 也 就 是 说 ， 我 们 的 索引 方式 不 再 局 限于 数字 了 ， 而 可 以 
使 用 一 些 更 为 友好 的 键 名 ， 比 如 first_name、age 等 。 

下 面 ， 让 我 们 通过 一 个 简单 的 示例 来 看 看 对 象 是 由 哪儿 部 分 组 成 
的 : 

Var hero = { 

breed: "Turtle ， 


occupation: 'Ninja 
bs 
正如 我 们 所 见 : 
这 里 有 一 个 用 于 表示 该 对 象 的 变量 名 hero; 
与 定义 数组 时 所 用 的 中 括号 [0 不同， 对象 使 用 的 是 大 括号 全 ; 
括号 中 用 逗号 分 割 的 是 组 成 该 对 象 的 元 素 (通常 被 称 之 为 属 


全 上 
键 / 值 对 之 间 用 冒号 分 割 ， 例 如 ，key: value 。 
有 时 候 ， 我 们 还 可 以 在 键 名 (属性 名 ) 上 面 加 一 对 引号 ， 例 如 ， 
下 面 三 行 代 码 所 定义 的 内 容 是 完全 相同 的 : 
var hero = {occupation: 1}; 
Var hero = {"occupation": 1}; 


Var hero = {'occupation': 1}; 


通常 情况 下 ， 我 们 不 建议 您 在 属性 名 上 面 加 引号 (这 也 能 减少 一 
些 输入 ) ， 但 在 以 下 这 些 情境 中 ， 引 号 是 必须 的 。 

如 果 属 性 名 是 JavaScript 中 的 保留 字 之 一 的 话 (具体 可 参考 附录 
A: 保留 字 ) 。 

如 采 属 性 名 中 包含 空格 或 其 他 特殊 字符 的 话 (包括 任何 除 字 母 、 
数字 、 下 划 线 及 美元 符号 以 外 的 字符 ) 。 

如 宋 属 性 名 以 数字 开头 的 话 。 

总 而 言 之 ， 如 采 我 们 所 选 的 属性 名 不 符合 JavaScript 中 的 变量 命名 
规则 ， 就 必须 对 其 施加 一 对 引号 。 

下 面 ， 让 我 们 来 看 一 个 怪异 的 对 象 定义 : 


varo={ 


$omething: 1, 

'yes or no': 'yes, 

"1@#$%AR*': true 
上 
虽然 这 个 对 象 的 属性 名 看 起 来 很 另类 ， 但 该 对 象征 合法 的 ， 因 为 
我 们 在 它 的 第 二 和 人 第 三 个 属性 名 上 加 了 引号 ， 否 则 一 定 会 出 钳 。 

在 本 章 稍 后 的 内 容 中 ， 还 会 介绍 除了 [和 全 以 外 的 定义 数组 和 对 象 

的 方法 。 但 首先 要 明日 的 是 当前 这 种 方法 的 术语 名 词 ， 用 吕 定 义 数组 的 
方法 我 们 称 之 为 数组 文本 标识 法 (array literal notation) ， 而 同样 的 ， 
用 大 括号 们 定义 对 象 的 方法 就 叫做 对 象 文本 标识 法 (object literal 


notation) 。 


4.1.1 元 素 、 属 性 、 方 法 与 成 


说 到 数组 的 时 候 ， 我 们 第 说 其 中 包含 的 是 元 素 。 而 当 我 们 说 对 象 
时 ， 束 会 说 其 中 包 全 的 古 属性 。 实 际 上 对 于 JavaScript 来 说 ， 它 们 并 没 


有 多 大 的 区 别 ， 只 是 在 技术 术语 上 的 表达 习惯 有 所 不 同 轻 了 。 这 也 是 
它 区 别 于 其 他 程序 设计 语言 的 地 方 。 
另外 ， 对 象 的 属性 也 可 以 是 国 数 ， 因 为 函数 本 喘 也 是 一 种 数据 。 
在 这 种 情况 下 ， 我 们 称 该 属性 为 方法 。 例 如 下 面 的 talk 束 是 一 个 方法 : 
var dog = { 


name: 'Benji, 
talk: function(){ 
alert("Woof, woof!'); 
} 
上 
按照 上 一 章 的 经 验 ， 我 们 也 可 以 像 下 面 这 样 ， 在 数组 中 存储 一 些 
函数 元 素 并 在 需要 时 调用 它们 ， 但 这 在 实践 中 并 不 多 见 。 
>vara= [j: 
> a[0] = function(what){ alert(what); }; 
> a[0](Boo!'"); 
有 时 候 您 可 能 还 会 看 到 一 个 对 象 的 属性 指向 为 一 个 对 象 属性 的 情 
况 。 而 且 所 指 同 的 属性 也 可 以 古 函 数 。 


4.1.2 哈 、 型 数组 


在 一 些 程序 设计 语言 中 ， 通 常 都 会 存在 着 两 种 不 同 的 数组 形式 。 

一 般 性 数组 ， 也 叫做 索引 型 数组 或 者 枚 举 型 数组 (通常 以 数字 为 
键 名 ) 。 

关联 型 数组 ， 也 叫做 哈 希 表 或 者 字典 〈 通 常 以 字符 串 为 键 值 ) 。 

在 JavaScript 中 ， 我 们 会 用 数组 来 表示 索引 型 数组 ， 而 用 对 和 象 来 表 
示 关 联 型 数组 。 因 此 ， 如 果 我 们 想 在 JavaScript 中 使 用 哈 硕 表 ， 束 必须 
要 用 到 对 象 。 


4.1.3 访问 对 象 属性 


我 们 可 以 通过 以 下 两 种 方式 来 访问 对 象 的 属性 。 

中 括号 表示 法 ， 例 如 hero['"occupation']。 

所 号 表示 法 ， 例 如 hero.occupation 。 

相对 而 言 ， 点 号 表示 法 更 易于 读 写 ， 但 也 不 是 总 能 
规则 也 适用 于 引用 属性 名 ， 如 采 我 们 所 访问 的 属性 不 符 
则 ， 它 就 不 能 通过 点 号 表示 法 来 访问 。 

接 下 来 ， 让 我 们 通过 hero 对 象 来 学 习 一 下 这 两 种 表示 法 : 


var hero = { 


适用 的 。 这 一 
合 


变量 命名 


| 


breed: "Turtle, 
occupation: Ninja 
}; 
下 面 我 们 用 点 号 表示 法 来 访问 属性 : 
> hero.breed; 
"Turtle" 
再 用 中 括号 表示 法 来 访问 属性 : 
> hero["occupation ]; 
"Ninja" 
如 果 我 们 访问 的 属性 不 存在 ， 代 码 束 会 返回 undefined 。 


> 'Hair color is ' + hero.hair color: 


"Hair color is undefined" 


为 外 ， 由 于 对 象 中 可 以 包含 任何 类 型 的 数据 ， 目 然 也 包括 其 他 对 


var book = { 
name: 'Catch-22,", 


published: 1961, 


author: { 
firstname: 'Joseph ， 


]astname: 'Heller 


} 
}; 
在 这 里 ， 如 果 我 们 想 访问 book 对 象 的 author 属 性 对 象 的 firstname 属 
性 ， 就 需要 这 样 : 


> book.author.firstname; 

"Joseph" 

当然 ， 也 可 以 连续 使 用 中 括号 表示 法 ， 例 如 : 

> book['author'l['lastname']; 

"Heller" 

甚至 可 以 混合 使 用 这 两 种 表示 法 ， 例 如 : 

> book.author[ lastname']; 

"Heller" 

> book[author].lastname; 

"Heller" 

另外 还 有 一 种 情况 ， 如 采 我 们 要 访问 ead 是 不 确定 的 ， 束 必 
须 使 用 中 括号 表示 法 了 ， 它 允许 我 们 在 运行 时 通过 变量 来 实现 相关 属 
性 的 动态 存 取 。 

> var key = firstname '; 


> book.author[keyj]; 


"Joseph" 


由 于 对 象 方法 实际 上 只 是 一 个 函数 类 型 的 属性 ， 因 此 它们 的 访问 
方式 与 属性 完全 相同 ， 即 用 点 号 表示 法 或 中 括号 表示 法 均 可 。 其 调用 
(请 求 ) 方式 也 与 其 他 函数 相同 ， 在 指定 的 方法 名 后 加 一 对 括号 即 
可 。 例 如 下 面 的 say 方 法 : 


> Var hero={ 


breed: "Turtle ， 
occupation: Ninja， 
say: function() { 
return T am ' + hero.occupation; 
} 
}; 
> hero.say(); 
"Tam Ninja" 
如 果 调 用 方法 时 需要 传递 一 些 参数 ， 做 法 也 和 一 般 函 数 一 样 。 例 
如 : 
> hero.say('a', 'b', 'c'); 
另外 ， 由 于 我 们 可 以 像 访问 数组 一 样 用 中 括号 来 访问 属性 ， 因 此 
这 意味 着 我 们 同样 可 以 用 中 括号 来 调用 方法 。 
> herol['say'](); 
使 用 中 括号 来 调用 方法 在 实践 中 并 不 常见 ， 除 非 属 性 名 是 在 运行 
时 定义 的 : 
var method = 'Say '; 
hero[method](); 
最 佳 实践 提示 : 尽量 别 使 用 引号 (除非 别 无 他 法 ) 
尽量 使 用 点 号 表示 法 来 访问 对 象 的 方法 与 属性 。 不 要 在 对 象 中 使 
用 市 引号 的 属性 标识 。 


4.1.5 与 方法 


由 于 JavaScript 是 一 种 动态 语言 ， 所 以 它 允 许 我 们 随时 对 现存 对 象 
的 属性 和 方法 进行 修改 。 其 中 目 然 也 包括 添加 与 删除 属性 。 因 此 ， 我 
们 也 可 以 先 创建 一 个 空 对 象 ， 稍 后 再 为 它 添加 属性 。 下 面 ， 让 我 们 来 
看 看 具体 是 怎么 做 的 。 

自 先 创建 一 个 “ 空 ”对 象 : 

> Var hero = {}; 

“ 空 ” 对 和 象 

在 本 方 ， 我 们 构造 了 一 个 “ 空 ”对 象 : var hero ={};。 这 个 “ 空 ” 字 要 
打 引 号 ， 因 为 实际 上 这 个 对 象 并 不 是 空 的 。 虽 然 我 们 并 没有 为 它 定义 
属性 ， 但 它 本 身 有 一 些 继承 的 属性 。 您 会 在 后 续 章 节 学 习 到 属性 继承 
的 知识 。 当 然 ， 在 ES3 中 ， 对 象 不 可 能 是 空 的 。 然 而 在 ES5 中 ， 我 们 倒 
确实 是 可 以 真正 创建 一 个 不 继承 任何 属性 的 空 对 象 的 。 但 现在 我 们 暂 
时 还 是 将 这 个 知识 先 放 一 放 吧 。 

这 时 候 ， 如 有 果 我 们 访问 一 个 不 存在 的 属性 ， 束 会 像 这 样 : 


> typeof hero.breed; 


"undefined" 
现在 ， 我 们 来 为 该 对 象 添 加 一 些 属性 和 方法 : 
> hero.breed = 'turtle'; 
> hero.name = Leonardo '; 
> hero.sayName = function() { 

return hero.name; 
上 
然后 调用 该 方法 : 
> hero.sayName(); 


"Leonardo" 


接 下 来 ， 我 们 删除 一 个 属性 : 

> delete hero.name; 

true 

然后 再 调用 该 方法 ， 它 束 找 不 到 name 属 性 了 : 

> hero.sayName(); 

"undefined" 

灵活 的 对 象 

在 JavaScript 中 ， 对 象 在 任何 时 候 都 是 可 以 改变 的 ， 例 如 增加 、 删 
除 、 修 改 属 性 。 但 这 种 规则 也 有 例外 的 情况 : 某 些 内 建 对 象 的 一 些 属 
性 是 不 可 改变 的 〈 例 如 我 们 之 后 会 讨论 的 Math.PIU) 。 另 外 ，ES5 人 允许 
创建 不 可 改变 的 对 象 。 这 方面 的 更 多 知识 请 参考 附录 C: 内 建 对 象 。 


4.1.6 使 用 this 值 


在 之 前 的 示例 中 ， 方 法 sayName0 是 直接 通过 hero.name 来 访问 hero 
对 象 的 name 属 性 的 。 而 事实 上 ， 当 我 们 处 于 某 个 对 象 的 方法 内 部 时 ， 
还 可 以 用 男 一 种 方法 来 访问 同一 对 象 的 属性 ， 即 该 对 象 的 特殊 值 this。 
例如 : 


> var hero={ 


name: 'Rafaelo,, 
sayName: function() { 
return this.name; 
} 
}; 
> hero.sayNamel(); 


"Rafaelo" 


也 就 是 说 ， 当 我 们 引用 this 值 时 ， 实 际 上 所 引用 的 就 是 “这 个 对 象 ” 
或 者 “当前 对 象 ”。 


4.1.7 构造 器 函数 


另外 ， 我 们 还 可 以 通过 构造 器 函数 (constructor function) 的 方式 
来 创建 对 象 。 下 面 来 看 一 个 例子 : 
function Hero() { 
this.occupation = 'Ninja'; 
} 
为 了 能 使 用 该 函数 来 创建 对 象 ， 我 们 需要 使 用 new 操 作答， 例如 : 
> var hero = new Hero(); 
> hero.occupation,; 
"Ninja" 
使 用 构造 器 函数 的 好 处 之 一 是 它 可 以 在 创建 对 象 时 接收 一 些 参 
数 。 下 面 ， 我 们 就 来 修改 一 下 上 面 的 构造 器 函数 ， 使 它 可 以 通过 接收 
参数 的 方式 来 设 定 name 属 性 : 
function Heroname) { 
this.name = name; 
this.occupation = 'Ninja'; 
this.whoAreYou = function() { 
return "Im "+ 
this.name + 
"andlIma"+ 


this.occupation; 


现在 ， 我 们 就 能 利用 同一 个 构造 器 来 创建 不 同 的 对 象 了 : 

> var hl = new Hero(Michelangelo ); 

> var h2 = new Hero(CDonatello ); 

> hl.whoAreYoul(); 

"I'm Michelangelo and Im a Ninja" 

> h2.whoAreYou(); 

"I'm Donatello and I'm a Ninja" 

最 佳 实践 

依照 惯例 ， 我 们 应 该 将 构造 器 函数 的 首 字 母 大 写 ， 以 便 显 车 地 区 
别 于 其 他 一 般 函 数 。 

如 果 我 们 在 调用 一 个 构造 器 函数 时 忽略 了 new 操 作 符 ， 尽 管 代 码 不 
会 出 错 ， 但 它 的 行为 可 能 会 令 人 出 乎 预料 ， 例 如 ; 

> var h = Hero(Leonardo'); 

> typeof h; 

"undefined" 

能 看 出 来 上 面 发 生 了 什么 吗 ? 由 于 这 里 没有 使 用 new 操 作 符 ， 因 此 
我 们 不 是 在 创建 一 个 新 的 对 象 。 这 个 函数 调用 与 其 他 函数 并 没有 区 
别 ， 这 里 的 h 值 应 该 融 是 该 函数 的 返回 值 。 而 由 于 该 函数 没有 显 式 返回 
值 〈 它 没有 使 用 关键 字 retum) ， 所 以 它 实际 上 返回 的 是 undefined 值 ， 
并 将 该 值 赋值 给 了 h 。 

那么 ， 在 这 种 情况 下 this 引 用 的 是 什么 呢 ? 答案 是 全 局 对 象 。 


4.1.8 全 局 对 象 


之 前 ， 我 们 已 经 讨论 过 全 局 变量 (以 及 应 该 如 何 避 人 免 使 用 它们 ) 
和 JavaScript 程序 在 答 主 环境 (例如 浏 咒 器 ) 中 的 具体 运行 情况 。 现 
在 ， 我 们 又 学习 了 对 象 的 相关 知识 ， 是 时 候 了 解 一 些 真 相 了 : 事实 


上 上， 程序 所 在 的 答 主 环境 一 般 都 会 为 其 提供 一 个 全 局 对 象 ， 而 所 谓 的 
全 局 变量 其 实 都 只 不 过 是 该 对 象 的 属性 县 了。 

例如 当 程 序 的 宿主 环境 是 Web 浏 贤 器 时 ， 它 所 提供 的 全 局 对 象 就 苹 
window。 男 一 种 获取 全 局 对 象 的 方法 〈 这 种 方法 在 浏览 器 以 外 的 大 多 
数 其 他 环境 也 同样 有 效 ) 是 在 构造 器 函数 之 外 使 用 this 关键 字 。 例 
如 ， 可 以 在 任何 函数 之 外 的 全 局 代码 部 分 这 么 做 。 

下 面 ， 我 们 来 看 一 个 具体 示例 。 表 和 完 ， 我 们 在 所 有 函数 之 外 声明 
一 个 全 局 变量 ， 例 如 : 

>vara= 1; 

然后 ， 我 们 就 可 以 通过 各 种 不 同 的 方式 来 访问 该 全 局 变量 了 。 

可 以 当做 一 个 变量 a 来 访问 。 

可 以 当做 全 局 对 象 的 一 个 属性 来 访问 ， 例 如 window['a] 或 者 
Window.a。 

可 以 通过 this 所 指向 的 全 局 对 象 属 性 来 访问 。 例 如 : 


>vara=1; 


> window.a; 

1 

> this.a: 

1 

现在 ， 证 我 们 回 过 头 去 分 析 一 下 刚才 那个 不 使 用 new 操 作 符 调用 构 
造 狠 函数 的 情况 ， 那 时 候 ，this 值 指向 的 是 全 局 对 象 ， 并 且 所 有 的 属性 
设置 都 是 针对 this 所 代表 的 window 对 象 的 。 

也 束 古 说 ， 当 我 们 声明 了 一 个 构造 玉 数 ， 但 叉 不 通过 new 来 调用 它 
时 ， 代 码 瓯 会 返回 undefined: 


> function Hero(name) { 


this.name = name: 


} 


> var h = Hero(Leonardo'); 

> typeof h; 

"undefined" 

> typeof h.name; 

TypeError: Cannot read property mame' of undefined 

由 于 我 们 在 Hero 中 使 用 了 this， 所 以 这 里 就 会 创建 一 个 全 局 变量 

(同时 也 是 全 局 对 象 的 一 个 属性 ) : 

> name; 

"Leonardo" 

> window.name; 

"Leonardo" 

而 如 果 我 们 使 用 new 来 调用 相同 的 构造 高 函数 ， 我 们 就 会 创建 一 个 
新 对 象 ， 并 且 this 也 会 自动 指向 该 对 象 : 

> var h2 = new Hero(Michelangelo ); 

> typeof h2; 

"object" 

> h2.name; 

"Michelangelo" 

除 此 之 外 ， 我 们 在 第 3 章 : 函数 所 见 的 那些 范 数 也 都 可 以 当做 
window 对 象 方法 来 调用 ， 例 如 下 面 两 个 调用 的 效果 完全 相同 : 

> parseInt(101 dalmatians'); 

101 

> window.parselInt(101 dalmatians'); 

101 

并 且 ， 如 果 在 所 有 函数 之 外 ， 这 样 使 用 也 是 可 以 的 : 

> this.parselInt('101 dalmatians'); 

101 


4.1.9 构造 器 属性 


当 我 们 创建 对 象 时 ， 实 际 上 同时 也 赋予 了 该 对 象 一 种 特殊 的 属性 
一 一 即 构造 器 属性 (constructor property) 。 该 属性 实际 上 是 一 个 指向 
用 于 创建 该 对 象 的 构造 右 函 数 的 引用 。 

例如 ， 我 们 继续 之 前 的 例子 : 

> h2.constructor; 

function Heroname){ 

this.name = name; 

} 

当然 ， 由 于 构造 名 属性 所 引用 的 是 一 个 函数 ， 因 此 我 们 也 可 以 利 
用 它 来 创建 一 个 其 他 新 对 象 。 例 如 像 下 面 这 样 ， 大 意 就 是 :“ 无 论 对 象 
h2 有 没有 被 创建 ， 我 们 都 可 以 用 它 来 创建 另 一 个 对 象 ”。 

> var h3 = new h2.constructor('Rafaello'); 

> h3.name; 

"Rafaello" 

另外 ， 如 果 对 象 是 通过 对 象 文本 标识 法 所 创建 的 ， 那 么 实际 上 它 
就 是 由 内 建构 造 话 Object0 男 数 所 创建 的 〈 关 于 这 一 点 ， 我 们 稍 后 还 会 
再 做 详细 介绍 ) 。 


> var 0 = {}:; 


> 0.COnstructor; 
function Object(O{ [native code] } 
> typeof o.constructor; 


"function" 


4.1.10 instanceof 操 作 符 


通过 instanceof 操作 符 ， 我 们 可 以 测试 一 个 对 象 是 不 是 由 某 个 指定 


的 构造 器 函数 所 创建 的 。 例 如 : 


> function Hero(){} 

> var h = new Hero(); 
> var 0 = {}; 

> h instanceof Hero; 
true 

> h instanceof Object; 
true 

> 0 instanceof Object; 


true 


请 注意 ， 这 里 的 函数 名 后 面 没有 加 括号 ( 即 不 是 h instanceof 


Hero0) ， 因 为 这 里 不 是 画 数 调用 ， 所 以 我 们 只 需要 像 使 用 其 他 变量 一 


样 ， 


作 符 
作 ， 


引用 该 函数 的 名 字 即 可 。 
4.1.11 返回 对 象 的 函数 


除了 使 用 new 操 作 符 调 用 构造 右 函 数 以 外 ， 我 们 也 可 以 抛 开 new 操 
只 用 一 般 函 数 来 创建 对 象 。 这 就 需要 一 个 能 执行 某 些 预备 工 
并 以 对 象 为 返回 值 的 函数 。 
例如 ， 下 面 就 有 一 个 用 于 产生 对 象 的 简单 贸 数 factory0: 
function factory(name) { 
return { 
name: name 
bs 
} 
然后 我 们 调用 factory0) 来 生成 对 象 : 


> var 0 = factory('one'"); 

> 0.name; 

"one" 

> 0.COnstructor 

function ObjectO{ [native code] } 

实际 上 ， 构 造 器 函数 也 是 可 以 返回 对 象 的 ， 只 不 过 在 this 值 的 使 
用 上 会 有 所 不 同 。 这 意味 着 我 们 需要 修改 构造 器 函数 的 默认 行为 。 下 
面 ， 我 们 来 看 看 具体 是 怎么 做 的 。 

这 是 构造 器 的 一 般 用 法 : 

> function CO { 


this.a = 1; 
} 
> var c= new C(); 
> Cc.a; 
1 


但 现在 要 考虑 的 是 这 种 用 法 : 
> function C2() { 
this.a = 1; 
return {b: 2 上 
} 
> var Cc2 = new C20(); 
> typeof c2.a; 
"undefined" 
> C2.b; 
2 
能 看 出 来 发 生 了 什么 吗 ? 在 这 里 ， 构 造句 返回 的 不 再 是 包含 属性 a 
的 this 对 象 ， 而 是 另 一 个 包含 属性 b 的 对 象 中。 但 这 也 只 有 在 画 数 的 返 


回 值 是 一 个 对 象 时 才 会 发 生 ， 而 当 我 们 企图 返回 的 是 一 个 非 对 象 类 型 
时 ， 该 构造 锅 将 会 照 间 返回 this。 
关于 对 象 在 构造 器 函数 内 部 是 如 何 创 建 出 来 的 ， 您 可 以 设想 在 男 
数 开 头 处 存在 一 个 叫做 this 的 变量 ， 这 个 变量 会 在 函数 结束 时 被 返 回 ， 
吏 像 这 样 : 
function CO { 
// var this = {}; pseudo code, you can't do this 
this.a = 1; 


// return this: 


} 
4.1.12 传递 天 


当 我 们 揽 贝 某 个 对 象 或 者 将 它 传递 给 某 个 函数 时 ， 往 往 传递 的 都 
是 该 对 象 的 引用 。 因 此 我 们 在 引用 上 所 做 的 任何 改动 ， 实 际 上 都 会 影 
啊 它 所 引用 的 原 对 象 。 

在 下 面 的 示例 中 ， 我 们 将 会 看 到 对 象 是 如 何 赋值 给 男 一 个 变量 
的 ， 并 且 ， 如 果 我 们 对 该 变量 做 一 些 改变 操作 的 话 ， 原 对 象 也 会 跟着 
被 改变 : 

> var original = {howmany: 1}; 

> Var mycopy = original; 

> mycopyhowmany; 

1 

> mycopy.howmany = 100; 

100 

> original.howmany; 

100 


同样 的 ， 将 对 象 传递 给 函数 的 情况 也 大 抵 如 此 : 
> var original = {howmany: 100)}; 

> var nullify = function(o) {0.howmany = 0;} 

> nullify(original); 

> Original.howmany; 

0 


4.1.13 比较 对 象 


当 我 们 对 对 象 进 行 比 较 操 作 时 ， 当 且 仅 当 两 个 引用 指向 同一 个 对 
象 时 ， 结 果 为 tue。 而 如 果 是 不 同 的 对 象 ， 即 使 它们 碰巧 拥有 相同 的 属 
性 和 方法 ， 比 较 操作 也 会 返回 false 。 

下 面 ， 我 们 来 创建 两 个 看 上 去 完全 相同 的 对 象 : 

> var fido = {breed: 'dog'}; 


> var benji = {breed: 'dog'}; 

然后 ， 我 们 对 它们 进行 比较 ， 操 作 将 会 返回 false: 

> benji === fido; 

false 

> benji == fido; 

false 

我 们 可 以 新 建 一 个 变量 mydog， 并 将 其 中 一 个 对 象 赋值 给 它 。 这 
样 一 来 mydog 实际 上 就 指向 了 这 个 变量 。 

> var mydog = benji; 

在 这 种 情况 下 ，mydog 与 benji 所 指向 的 对 象 是 相同 的 (也 就 是 说 ， 
改变 mydog 的 属性 就 等 同 于 改变 benji)” ， 比 较 操作 束 会 返回 true 。 


> mydog === benji; 


true 


并 且 ， 由 于 fido 是 一 个 与 mydog 不 同 的 对 象 ， 所 以 它 与 mydog 的 
比较 结果 仍 为 false: 
> mydog === fido; 


false 


4.1.14 Webkit 控 制 台 中 的 对 


在 进一步 深入 介绍 JavaScript 的 内 建 对 象 之 前 ， 让 我 们 先 来 了 解 一 
些 对 象 在 Webkit 探 制 台中 的 工作 情况 。 

到 目前 为 止 ， 我 们 已 经 在 本 章 中 测试 了 许多 示例 ， 您 应 该 已 经 注 
意 到 了 对 象 在 控制 台中 的 显示 方式 。 如 果 我 们 想 要 创建 一 个 对 象 ， 只 
需要 在 控制 台中 输入 它 的 名 字 并 按 Enter， 后 者 就 会 返回 一 个 单词 
Object ° 

该 单词 天 代表 了 我 们 的 新 对 象 ， 它 前 面 还 有 一 个 箭头 。 用 鼠标 单 
击 这 个 对 象 可 以 展开 它 的 属性 。 如 果 某 个 属 i 对象， 我 
们 就 可 以 反复 地 点 击 展开 它 。 展 开 操 作 可 以 帮助 您 了 解 对 象 内 部 具体 
有 哪些 属性 。 如 图 4-1 所 示 。 
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图 4-1 
您 可 以 暂时 忽略 _proto_ 属 性。 下 一 章 我 们 会 具体 解释 该 属性 。 


console.log 
另外， 控制 台 还 为 我 们 提供 了 ee console 的 对 象 和 一 系列 的 
方法 ， 例 如 console.ljog0 和 console.errorO。 这 些 函 数 ， 如 图 4-2 所 
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ee 
其 中 ，console.log0 既 可 以 在 我 们 想 进 行 某 种 快速 测试 时 提供 一 些 
便利 ， ee 。 例 
如 在 下 面 这 个 例子 中 ， 我 们 示范 了 如 何在 循环 中 使 用 该 范 数 : 


> for(vari=0;i<5;i++){ 


console.log(i); 


} 


WW 一 OO 


4.2 ， 


到 目前 为 止 ， 本 章 所 使 用 的 实际 上 都 是 ObjectO 构 造 器 函数 ， 它 会 
在 我 们 使 用 对 象 文本 标识 法 ， 或 访问 相关 构造 器 属性 时 返回 新 建 的 对 
象 。Object0 只 是 JavaScript 中 众多 内 建构 造 器 之 一 ， 在 本 间接 下 来 的 
内 容 中 ， 我 们 将 会 为 您 一 一 介绍 其 余 的 内 建构 造 器 。 

内 建 对 象 大 致 上 可 以 分 为 三 大 类 。 

数据 封装 类 对 象 一 一 包括 Object、Array、Boolean、Number 和 
String。 这些 对 象 代表 着 JavaScript 中 不 同 的 数据 类 型 ， 并 且 都 拥有 各 
目 不 同 的 typeof 返 回 值 (这 点 我 们 在 第 2 章 : 基本 数据 类 型 、 数 组 、 循 
环 及 条 件 表达 式 中 讨论 过 ) ， 以 及 undefined 和 null 状 态 。 

工具 类 对 象 一 一 包括 Math、Date、RegExp 等 用 于 提供 便利 的 对 
象 。 

错误 类 对 象 一 一 包括 一 般 性 错误 对 象 以 及 其 他 各 种 更 特殊 的 错误 
类 对 象 。 它 们 可 以 在 某 些 异 常 发 生 时 帮助 我 们 纠正 程序 工作 状态 。 

在 本 章 ， 我 们 只 讨论 这 些 内 建 对 象 的 一 小 部 分 方法 。 如 果 想 获得 
更 完整 的 资料 ， 读 者 可 以 参考 附录 C: 内 建 对 象 中 的 内 容 。 

另外 值得 一 提 的 是 ， 不 要 去 纠结 什么 是 内 建 对 象 ， 什么 是 内 建构 
造 硕 ， 实 际 上 它们 是 一 回 事 。 要 不 了 多 久 您 就 会 明日 ， 无 论 是 琅 数 还 
是 构造 器 函数 ， 最 后 都 是 对 象 。 


4.2.1 Object 4 


Object 是 JavaScript 中 所 有 对 象 的 父 级 对 象 ， 这 意味 着 我 们 创建 的 所 
有 对 象 都 继承 于 此 。 为 了 新 建 一 个 空 对 象 ， 我 们 既 可 以 用 对 象 文本 标 


识 法 也 可 以 调用 ObjectO 构 造 器 函数 ， 即 下 面 这 两 行 代码 的 执行 结果 是 
等 价 的 : 

> var 0 = {}; 

> var 0 = new Object(); 

我 们 之 前 提 到 过 ， 所 谓 的 “ 空 ” 对 象 ， 实 际 上 并 非 是 完全 无 用 的 ， 
它 还 是 包含 了 一 些 继承 来 的 方法 和 属性 的 。 在 本 书 中 ,“ 空 ?对 象 指 的 
是 像 人 } 这 种 除 继承 来 的 属性 之 外 ， 不 含 任何 自身 属性 的 对 象 。 下 面 ， 
我 们 就 带 您 来 看 看 之 前 所 创建 的 * 空 ?对 象 o 中 的 部 分 属性 。 

o.constructor: 返回 构造 右 函 数 的 引用 。 

0.toString(): 返回 对 象 的 描述 字符 串 。 

o.valueOfO: 返回 对 象 的 单 值 指 述 信息 ， 通 常 返 回 的 就 是 对 象 本 


下 面 ， 我 们 来 实际 应 用 一 下 这 些 方法 。 首 先 创建 一 个 对 象 : 

> var 0 = new Object(); 

然后 调用 toString() 方 法 ， 返 回 该 对 象 的 描述 字符 串 : 

> o.toString(); 

"[object Object]" 

toString0 方 法 会 在 某 些 需要 用 字符 串 来 表示 对 象 的 时 候 被 
JavaScript 内 部 调用 。 例 如 alert0 的 工作 就 需要 用 到 这 样 的 字符 串 。 所 
以 ， 如 有 果 我 们 将 对 象 传递 给 了 一 个 alert() 函 数 ，toString0 方 法 就 会 在 后 
台 被 调用 ， 也 丈 是 说 ， 下 面 两 行 代码 的 执行 结果 是 相同 的 : 


> alert(o); 


> alert(0.toString()); 

另外 ， 字 符 训 连接 操作 也 会 使 用 字符 串 描 述 文 本 ， 如 宋 我 们 将 某 
个 对 象 与 字符 串 进行 连接 ， 那 么 该 对 象 就 先 调 用 自身 的 toString0 方 
2 


> "An object:"+0; 


"An object: [object Object]” 
valueOfO 方 法 也 是 为 所 有 对 象 共有 的 一 个 方法 。 对 于 简单 对 象 


( 即 以 ObjectO 为 构造 器 的 对 象 ) 来 说 ，valueOf0 方 法 所 返回 的 就 是 对 
象 自 己 。 


> o.valueOf() === 0; 

true 

总 而 言 之 ， 

我 们 创建 对 象 时 既 可 以 用 var o = 人 的 形式 ( 即 执行 对 象 文本 标识 


法 ， 我 们 比较 推荐 这 种 方法 ) ， 也 可 以 用 var o = new Object(); 


无 论 是 多 复杂 的 对 象 ， 它 都 是 继承 目 Object 对 象 的 ， 并 且 拥 有 其 


所 有 的 方法 (例如 toString0) 和 属性 (例如 constructor) 。 


4.2.2 Array 


Array0 是 一 个 用 来 构建 数组 的 内 建构 造 右 函数 ， 例 如 ; 

> var a = new Array(); 

这 与 下 面 的 数组 文本 标识 法 是 等 效 的 : 

> var a = []; 

无 论 数 组 是 以 什么 方式 创建 的 ， 我 们 都 能 照常 往 里 添加 元 素 : 

> a[0] = 1: 

> a[ll] = 2; 

>a; 

[1, 2] 

当 我 们 使 用 Array0 构 造句 创建 新 数组 时 ， 也 可 以 通过 传 值 的 方式 


为 其 设 定 元 素 。 


> var a = new Array(1,2,3,four ); 


> a; 


[1, 2, 3, "four"] 

但 是 如 条 我 们 传递 给 该 构造 右 的 是 一 个 单独 数字 ， 吏 会 出 现 一 种 
异常 情况 ， 即 该 数值 会 被 认为 是 数组 的 长 度 。 

> var a2 = new Array(5); 

> a2; 

[undefined x 5] 

既然 数组 是 由 构造 器 来 创建 的 ， 那 么 这 是 否 意味 着 数组 实际 上 是 
一 个 对 象 呢 ?的 确 如 此 ， 我 们 可 以 用 typeof 操 作 符 来 验证 一 下 : 

> typeof [1, 2, 3]; 


"object" 


由 于 数组 也 是 对 象 ， 那 么 就 说 明 它 也 继承 了 Object 的 所 有 方法 和 属 


> var a = [1, 2, 3, ‘four']; 

> a.toString(); 

"1,2,3,four" 

> a.valueOf(); 

[1, 2, 3, "four"] 

> a.constructor; 

function Array(){ [native code] } 

尽管 数组 也 是 一 种 对 象 ， 但 还 是 有 一 些 特殊 之 处 ， 因 为 : 

数组 的 属性 名 是 从 0 开始 递增 ， 并 目 动 生成 数值 ; 

数组 拥有 一 个 用 于 记录 元 素数 量 的 length 属 性 ; 

数组 在 父 级 对 象 的 基础 上 扩展 了 更 多 额外 的 内 建 方法 。 

下 面 来 实际 验证 一 下 对 象 与 数组 之 间 的 区 别 ， 让 我 们 从 创建 空 对 
象 o 和 空 数组 a 开始 : 


> var a= |[],o= {)}; 


首先 ， 定 义 数 组 对 象 时 会 自动 生成 一 个 length 属 性 。 而 这 在 一 般 对 
象 中 是 没有 的 : 

> a.length; 

0 

> typeof o.length; 

"undefined" 

在 为 数组 和 对 象 添 加 以 数字 或 非 数 字 为 键 名 的 属性 操作 上 ， 两 者 
间 并 没有 多 大 的 区 别 : 

> a[0] = 1: 

> 0[0] = 1; 

> a.prop = 2; 

> 0.prop = 2; 

length 属 性 通常 会 随 着 数字 键 名 属性 的 数量 而 更 新 ， 而 忽略 非 数字 
键 名 属性 : 

> a.length; 

1 

我 们 也 可 以 手动 设置 langth 属 性 。 如 有 果 设 置 的 值 大 于 当前 数组 中 元 
素数 量 ， 剩 下 的 那 部 分 会 被 自动 创建 〈 值 为 undefined) 的 空 元 素 所 填 
充 : 

> a.length = 5; 

5 

>a: 

[1, undefined x 4] 

而 如 果 我 们 设置 的 length 值 小 于 当前 元 素数 ， 多 出 的 那 部 分 元 素 将 
会 被 移 除 : 

> a.length = 2; 

2 


> ai 

[1, undefined x 1| 

一 些 数组 方法 

除了 从 父 级 对 象 那 里 继承 的 方法 以 外 ， 数 组 对 象 中 还 有 一 些 更 为 
有 用 的 方法 ， 例 如 sort0、join0 和 sliceO0 等 (完整 的 方法 列表 见 附录 C: 
内 建 方法 ) 。 

下 面 ， 我 们 将 通过 一 个 数组 来 试验 一 下 这 些 方法 : 

> var a = [3, 5, 1, 7, 'test']j; 

push() 方 法 会 在 数组 的 末端 添加 一 个 新 元 素 ， 而 pop0 方 法 则 会 移 除 
最 后 一 个 元 素 ， 也 就 是 说 apush("new) 就 相当 于 a[a.length] = "new"， 
而 apopO 则 与 aJlength-- 的 结果 相同 。 

另外 ，push0 返 回 的 是 改变 后 的 数组 长 度 ， 而 pop 所 返回 的 则 是 被 
移 除 的 元 素 。 

> a.push(mew ); 

6 

> al 

[3, 5, 1, 7, "test", "new"] 

> a.popQ); 

"new" 

>a: 

[3, 5, 1, 7, "test"] 

而 sort() 方 法 则 是 用 于 给 数组 排序 的 ， 它 会 返回 排序 后 的 数组 ， 在 
下 面 的 示例 中 ， 排 序 完 成 后 ，a 和 b 所 指向 的 数组 是 相同 的 : 

> var b = a.sort(); 

> b; 

[1, 3, 5, 7, "test"] 


> 上 三 三 三 b; 


true 

join0) 方 法 会 返回 一 个 由 目标 数组 中 所 有 元 素 值 用 逗号 连接 而 成 的 
字符 串 ， 我 们 可 以 通过 该 方法 的 参数 来 设 定 这 些 元 陛 之 间 用 什么 字符 
( 串 ) 连接 。 例 如 : 


> a.join(' is not ); 


"1 is not 3 is not 5 is not 7 is not test" 

slice() 方 法 会 在 不 修改 目标 数组 的 情况 下 返回 其 中 的 某 个 片 段 ， 该 
片段 的 首尾 索引 位 置 将 由 slice0 的 头 两 个 参数 来 指定 (都 以 0 为 基 
数 ) 。 

>b = a.slice(1, 3); 

[3, 5] 

>b=a.slice(0, 1); 

[1] 

>b = a.slice(0, 2); 


[1, 3] 
所 有 的 截取 完成 之 后 ， 原 数组 的 状态 不 变 : 
> 9; 


[1, 3, 5, 7, "test"] 

splice0 则 是 会 修改 目标 数组 的 。 它 会 移 除 并 返回 指定 切 上 族 ， 并 且 
在 可 选 情 况 下 ， 它 还 会 用 指定 的 新 元 素来 填补 侦 切 除 的 空缺 。 该 方法 
的 头 两 个 参数 所 指定 的 是 要 移 除 切片 的 首尾 索引 位 置 ， 其 他 参数 则 用 
于 填补 的 新 元 素 值 。 

>b=a.splice(1, 2, 100, 101, 102); 

[3, 5] 

>a; 

[1, 100, 101, 102, 7, "test"] 

当然 ， 用 于 填补 空缺 的 新 元 素 是 可 选 的 ， 我 们 也 可 以 直接 跳 过 : 


> a.splice(1, 3); 
[100, 101, 102] 
> a; 


[1, 7, "test"| 


4.2.3 Function 


之 前 ， 我 们 已 经 了 解 函数 是 一 种 特殊 的 数据 类 型 ， 但 事实 还 远 
不 止 如 此 ， 它 实际 上 是 一 种 对 象 。 函数 对 象 的 内 建构 造 右 是 
Function0， 你 可 以 将 它 作为 创建 画 数 的 一 种 备 选 方式 (但 我 们 并 不 推 
存 这 种 方式 ) 

人 下面 展示 了 三 种 定义 函数 的 方式 : 


> function sum(a, b){ // function declaration 


return a + b; 
} 
> sum(1, 2); 
3 
> var sum = function(a, b) { // function expression 
return a + b; 
上 
> Sum(1, 2) 
3 
> Var Sum = new Function('a', 'b', Teturn a + b;'); 
> sum(1, 2) 
3 
0 就 必须 要 通过 参数 传递 
的 方式 来 设 定 函 数 的 参数 名 (通常 是 用 字符 串 ) 以 及 函数 体 中 的 代码 


(也 是 用 字符 串 ) 。JavaScript 引擎 自 会 对 这 些 源 代码 进行 解析 3， 并 
随即 创建 新 函数 ， 这 样 一 来 ， 就 会 带 来 气 eval0 相 似 的 缺点 。 因 此 我 们 
要 尽量 避免 使 用 Function() 构 造 器 来 定义 函数 。 

如 果 您 一 定 想 用 Function0) 构 造句 来 创建 一 个 拥有 许多 参数 的 男 
数 ， 可 了 解 一 点 : 这 些 参 数 可 以 是 一 个 由 逗号 分 割 而 成 的 单列 表 ， 所 
以 ， 下 面 例子 中 的 这 些 函 数 定义 是 相同 的 : 
> var first = new Function( 
'a, b, c,d, 
‘return arguments; 
); 
> first(1,2,3,4); 
[1, 2, 3, 4] 
> var second = new Function( 
'a, b,c, 
dd 
Teturn arguments; 
); 
> second(1,2,3,4); 
[1, 2, 3, 4] 


> var third = new Function( 


‘return arguments;' 
); 
> third(1,2,3,4); 


[1, 2, 3, 4] 
最 佳 实践 
请 尽量 避免 使 用 Function0 构 造 器 。 因 为 它 与 eval0 和 setTimeoutO 
(关于 该 函数 的 讨论 ， 我 们 稍 后 会 看 到 ) 一 样 ， 始 终 会 以 字符 串 的 形 
式 通 过 JavaScript 的 代码 检查 。 
4.2.3.1 函数 对 象 的 属性 
与 其 他 对 象 相同 的 是 ， 函 数 对 象 中 也 含有 名 为 constructor 的 属性 ， 
其 引用 的 就 是 Function0 这 个 构造 器 函数 。 
> function myfunc(a){ 
return a; 
上 
> myfunc.constructor; 
function Function(){[native code]} 
另外 ， 画 数 对 象 中 也 有 一 个 length 属 性 ， 用 于 记录 该 函数 声明 时 所 
决定 的 参数 数量 。 


> function myfunc(a, b, C){ 


return true; 
} 
> myfunc.length:; 
3 
prototype 属 性 
prototype 属 性 是 JavaScript 中 使 用 得 最 为 广 沁 的 函数 属性 。 我 们 将 
会 在 下 一 章 中 详细 介绍 它 ， 现 在 只 是 做 个 简单 说 明 : 
每 个 函数 的 prototype 属性 中 都 指向 了 一 个 对 象 ; 
它 只 有 在 该 娘 数 是 构造 器 时 才 会 发 挥 作用 ，; 
该 范 数 创建 的 所 有 对 象 都 会 持 有 一 个 该 prototype 属性 的 引用 ， 并 
可 以 将 其 当做 自身 的 属性 来 使 用 。 


象 ， 


有 图 


下 面 ， 我 们 来 演示 一 下 prototype 属性 的 使 用 。 先 创建 一 个 简单 对 
对 和 象 中 只 有 一 个 name 属 性 和 一 个 say0 方 法 : 
var ninja={ 

name: 'Ninja, 

say: function(){ 


return T am a ' + this.name: 


}; 

这 方面 的 验证 很 简单 ， 因 为 任何 一 个 新 建 男 数 《即使 这 个 函数 没 
数 体 ) 中 都 会 有 一 个 prototype 属 性 ， 而 该 属性 会 指向 一 个 新 对 象 。 
> function F(){} 

> typeof F.prototype; 

"object" 


如 果 我 们 现在 对 该 prototype 属性 进行 修改 ， 就 会 发 生 一 些 有 趣 的 


变化 : 当前 默认 的 空 对 象 被 直接 替换 成 了 其 他 对 象 。 下 面 我 们 将 变量 


ninja 赋值 给 这 个 prototype: 


> F.prototype = ninja; 


现在 ， 如 果 我 们 将 FO 当 做 一 个 构造 右 函 数 来 创建 对 象 


baby_ninja， 那 么 新 对 象 baby_ninja 束 会 拥有 对 F.prototype 属 性 (也 就 是 
ninja) 的 访问 权 。 


> var baby_ninja = new F(); 


> baby_ninja.name; 


"Ninja" 

> baby_ninja.say(); 

"I am a Ninja" 

关于 prototype 属性 的 更 多 内 容 ， 我 们 将 会 在 后 续 章 节 中 继续 讨 


。 实际 上 下 一 整 章 都 是 与 此 相关 的 内 容 。 


4.2.3.2 函数 对 象 的 方法 

所 有 的 函数 对 象 都 是 继承 目 顶 级 父 对 象 Object 的 ， 因 此 它 也 拥有 
Object 对 象 的 方法 。 例 如 toString0。 当 我 们 对 一 个 函数 调用 toString() 方 
法 时 ， 所 得 到 的 束 是 该 函数 的 源 代 码 。 

> function myfunc(a, b, ©) { 

returm a + b + C; 

} 

> myfunc.toString(); 

"function myfunc(a, b, c) { 

"returnat+b+e; 

}" 

但 如 果 我 们 想 用 这 种 方法 来 查看 那些 内 建 钞 数 的 源码 的 话 ， 就 只 
会 得 到 一 个 蝇 无 用 处 的 字符 串 [native code]。 

> parselnt.toString(); 


"function parseIntO {[native code]}" 


如 您 所 见 ， 我 们 可 以 用 toString0 函 数 来 区 分 本 地 方法 和 目 定 义 方 


法 


toString() 方 法 的 行为 与 运行 环境 有 天， 浏览 絮 之 间 也 会 有 差异 ， 
比如 空格 和 空 行 的 多 少 。 

4.2.3.3 call() 与 apply0 

在 JavaScript 中 ， 每 个 函数 都 有 call0 和 apply0 两 个 方法 ， 您 可 以 用 
它们 来 触发 函数 ， 并 指定 相关 的 调用 参数 。 

此 外 ;这 两 个 方法 还 有 男 外 一 个 功能 ， 它 可 以 让 一 个 对 象 去 “ 借 
用 ” 男 一 个 对 象 的 方法 ， 并 为 已 所 用 。 这 也 是 一 种 非常 简单 而 实用 的 代 
码 重 用 。 

下 面 我 们 定义 一 个 some_obj 对 象 ， 该 对 象 中 有 一 个 say0 方 法 : 


Var some_obj = { 


name: Ninja， 
say: function(who){ 
return 'Haya '+ who+' ,Iama'+this.name; 
} 
上 
这 样 一 来 ， 我 们 就 可 以 调用 该 对 象 的 say0) 方 法 ， 并 在 其 中 使 用 
this.name 来 访问 其 name 属 性 了 : 
> some_obj.say( Dude'); 
"Haya Dude, [am a Ninja" 
下 面 ， 我 们 再 创建 一 个 my_obj 对 象 ， 它 只 有 一 个 name 属 性 : 
> var my_obj = {name: 'Scripting guru'}; 
显然 ，some_obj 的 Say0) 方 法 也 适用 于 my_obj ， 因 此 我 们 和 希望 将 该 
方法 当做 my_obj 目 映 的 方法 来 调用 。 在 这 种 情况 下 ， 我 们 就 可 以 试 试 
say() 芳 数 中 的 对 象 方法 call(): 
> some_obj.say.call(my_obj, 'Dude'"); 
"Haya Dude, [am a Scripting guru" 
成 功 了 ! 但 您 明日 这 是 怎么 回 事 吗 ? 由 于 我 们 在 调用 say() 范 到 四 
对 和 象 方法 cal0 时 传递 了 两 个 参数 : 对象 my_obj 和 字符 串 "Dude"。 这 样 
si 
用 。 因 而 我 们 看 到 ，this.name 返 回 的 不 再 是 "Ninja"， 而 古 "Scripting 
guru" 了 [和 。 
如 果 我 们 调用 call 方 法 时 需要 传递 更 多 的 参数 ， 可 以 在 后 面 依次 加 
入 它们 : 
some_obj.someMethod.call(my_obj, 'a', 'b', 'c'); 


另外 ， 如 果 我 们 没有 将 对 象 传 递 给 call0 的 首 参 数 ， 或 者 传递 给 它 
的 是 null， 它 的 调用 对 象 将 会 被 默认 为 全 局 对 象 3l。 


apply() 的 工作 方式 与 call0 基 本 相同 ， 唯 一 的 不 同 之 处 在 于 参数 的 
传递 形式 ， 这 里 目标 函数 所 需要 的 参数 都 是 通过 一 个 数组 来 传递 。 所 
以 ， 下 面 两 行 代码 的 作用 是 等 效 的 : 

some_obj.someMethod.apply(my_obj, ['a', 'b', 'c']); 

some_obj.someMethod.call(my_obj, 'a', 'b', 'c'"); 

因而 ， 对 于 之 前 的 示例 ， 我 们 也 可 以 这 样 写 : 

> some_obj.say.apply(my_obj, ['Dude']); 

"Haya Dude, [am a Scripting guru" 

4.2.3.4 重新 认识 arguments 对 象 

在 上 一 章 中 ， 我 们 已 经 掌握 了 如 何在 一 个 函数 中 通过 arguments 来 
访问 传递 给 该 男 数 所 需 的 全 部 参数 。 例 如 : 


> function f() { 


return arguments; 

} 

> {f(1,2,3); 

[1, 2, 3] 

尽管 arguments 看 上 去 像 是 一 个 数组 ， 但 它 实际 上 是 一 个 类 似 数 组 
的 对 象 。 它 和 数组 相似 是 因为 其 中 也 包含 了 索引 元 素 和 length 属 性 。 但 
相似 之 处 也 束 到 此 为 止 了 ， 因 为 arguments 不 提供 一 些 像 sortD0、sliceO 这 
样 的 数组 方法 。 

但 我 们 可 以 把 arguments 转 换 成 数组 ， 这 样 就 可 以 对 它 使 用 各 种 各 
样 的 数组 方法 了 。 在 下 面 这 个 例子 中 ， 我 们 用 刚 学 到 的 call0 方 法 做 到 
了 这 点 : 


> function fO{ 


var args = [].slice.call(arguments); 
return args.reverse(); 


} 


> {f(1,2,3,4); 

[4,3,2,1] 

如 您 所 见 ， 这 里 的 做 法 古 新 建 一 个 空 数组 []， 再 使 用 它 的 slice 属 
性 。 当 然 ， 您 也 可 以 通过 Array.prototype.slice 来 调用 同一 个 函数 。 

4.2.3.5 推 听 对 象 类 型 

之 前 ， 我 们 已 经 介绍 过 arguments 对 象 跟 数 组 之 间 的 不 同 之 处 。 但 
二 者 之 间 具 体 应 该 如 何 区 分 呢 ? 或 者 我 们 换 一 种 问 法 : 既然 数组 的 
typeof 返回 值 也 为 "object"， 那 么 要 如 何 区 分 对 象 与 数组 呢 ? 

答案 是 使 用 Object 对 象 的 toString() 方 法 。 这 个 方法 会 返回 所 创建 对 
象 的 内 部 类 名 。 

> Object.prototype.toString.call({}); 

"[object Object]" 

> Object.prototype.toString.call([]); 


"[object Array]" 

在 这 里 ，toString0) 方 法 必须 要 来 目 于 Object 构 造 絮 的 prototype 属 
性 。 直 接 调 用 Array 的 toString0 方 法 是 不 行 的 ， 因 为 在 Array 对 象 中 。 这 
个 方法 已 经 出 于 其 他 目的 被 重 写 了 : 

> [1, 2, 3].toString(); 

"1,2,3" 

也 可 以 写 为 : 

> Array.prototype.toString.call([1, 2, 3]); 

"1,2,3" 

下 面 我 们 来 做 一 些 更 有 趣 的 尝试 。 您 也 可 以 单独 为 
Object.prototype.toString 设 置 一 个 引用 变量 ， 以 便 让 代码 显得 更 简短 一 
止 c . 


> var toStr = Object.prototype.to9String; 


如 果 您 用 这 个 方法 调用 arguments， 很 快 就 能 发 现 它 与 Array 之 间 的 


> (function () { 
return toStr.call(arguments); 
}0); 
"[object Arguments]" 
同样 ， 这 个 方法 也 适用 于 DOM 元 素 : 
> toStr.call(document.body); 
"[object HTMLBodyElement]" 


4.2.4 Boolean 


下 面 继续 我 们 的 JavaScript 内 建 对 象 之 旅 。 接 下 来 要 介绍 的 对 象 相 
对 来 说 束 人 简 单 多 了 ， 它 们 不 过 是 一 些 基 本 数据 类 型 的 封 狼 ， 主 要 包括 
Boolean、Number、String 等 。 

在 第 2 章 : 基本 数据 类 型 、 数 组 、 循 环 及 条 件 表 达 式 中 ， 我 们 已 经 
学 习 了 大 量 关 于 Boolean 类 型 的 应 用 。 在 这 里 ， 我 们 要 介绍 的 是 与 
Boolean0) 构 造 右 相关 的 内 容 。 

> var b = new Boolean(); 

在 这 里 最 重要 的 一 点 是 ， 我 们 必须 明日 这 里 所 新 创建 的 b 是 一 个 对 
象 ， 而 不 是 一 个 基本 数据 类 型 的 布尔 值 。 如 采 想 将 b 转换 成 基本 数据 
类 型 的 布尔 值 ， 我 们 可 以 调用 它 的 valueOfO 方 法 〈 继 承 目 Object 对 
象 ) 


> var b = new Boolean(); 


> typeof b; 
"object" 


> typeof b.valueOf(); 


"boolean" 

> b.valueOf(); 

false 

总 体 而 言 ， 用 Boolean0) 构 造句 所 创建 的 对 象 并 没有 多 少 实用 性 ， 
因为 它 并 没有 提供 来 自 父 级 对 象 以 外 的 任何 方法 和 属性 。 

不 使 用 new 操 作 符 而 单独 作为 一 般 函 数 使 用 时 ，Boolean0 可 以 将 一 
些 非 布尔 值 转 换 为 布尔 值 〈 其 效果 相当 于 进行 两 次 取 反 操 
作 : !lvalue) 。 

> Boolean("test"); 

true 

> Boolean(""); 

false 

> Boolean({}); 


true 


而 且 ， 在 JavaScript 中 ， 除 了 那 六 种 falsy 值 外 ， 其 他 所 有 的 都 属于 
truthy 值 区 ， 其 中 也 包括 所 有 的 对 象 。 这 就 意味 着 所 有 由 new 
Boolean() 语 句 创 建 的 布尔 对 象 都 等 于 true， 因 为 它们 都 是 对 象 。 


> Boolean(new Boolean(false) ); 


true 

这 种 情况 确实 很 容易 让 人 混淆 。 而 且 考虑 到 Boolean 对 象 中 并 没有 
很 特别 的 方法 ， 我 们 建议 您 最 好 还 是 一 直 使 用 基本 类 型 来 表示 布尔 值 
比较 妥当 。 


4.2.5 Number 


Number() 芳 数 的 用 法 与 Boolean() 类 似 ， 即 : 


象 ; 


令 在 被 当做 构造 器 函数 时 〈 即 用 于 new 操 作 符 ) 


， 它 会 创建 一 个 对 


令 在 被 当做 一 般 范 数 时 ， 它 会 试图 将 任何 值 转换 为 数字 ， 这 与 
parseInt() 或 parseFloat() 起 到 的 作用 基本 相同 。 


> var n = Number(12.12'"); 

> 了; 

12.12 

> typeof n; 

"number" 

> varn = new Number('12.12"); 
> typeof n; 


"object" 


由 于 函数 本 喘 也 是 对 象 ， 所 以 会 拥有 一 些 属性 。 在 Number() 函 数 


> Number. MAX VALUE: 
1.7976931348623157e+308 

> Number.MIN_VALUE; 

De-324 

> Number POSITIVE_INFINITY; 
Infinity 

> Number.NEGATIVE_INFINITY; 
-Infinity 

> Number.NaN; 

NaN 


此 外 ，Number 对 象 中 还 提供 了 三 个 方法 ， 


， 有 一 些 内 置 属性 是 值得 我 们 注意 的 (它们 是 不 可 更 改 的 ) : 


它们 分 别 是 : 


toFixed()、toPrecision() 和 toExponential() (详细 内 容 见 附录 C: 内 建 对 


象 ) 


O 


> varn = new Number(123.456); 

> n.toFixed(1); 

"123.5" 

需要 注意 的 是 ， 你 可 以 在 事先 未 创建 Number 对 象 的 情况 下 使 用 这 
些 方法 。 在 这 些 例 子 中 ，Number 对 象 均 在 后 台 完 成 创建 和 销毁 : 

> (12345).to Exponential(); 

> "1.2345e+4" 

与 所 有 的 对 象 一 样 ，Number 对 象 也 提供 了 自己 的 toString() 方 法 。 
但 值得 注意 的 是 ， 该 对 象 的 toString0 方 法 有 一 个 可 选 的 radix 参 数 ( 它 
的 默认 值 是 10) 。 


> var n = new Number(255); 


> n.toString(; 
"255" 

> n.toString(10); 
"255" 

> n.toString(16); 
"ff™ 

> (3).toString(2); 
"11T， 

> (3).toString(10); 
"an 


4.2.6 String 


同样 ， 我 们 可 以 通过 String0) 构 造 器 画 数 来 新 建 String 对 象 。 该 对 象 
为 我 们 提供 了 一 系列 用 于 文本 操作 的 方法 ， 但 您 最 好 还 是 使 用 基本 的 
字符 品类 型 。 


下 面 ， 我 们 通过 一 个 示例 来 看 看 String 对 象 与 基本 的 字符 串 类 型 之 
间 有 什么 区 别 。 

> var primitive = 'Hello ; 

> typeof primitive; 

"string" 

> Var obj = new String('‘world'); 

> typeof obj; 

"object" 

String 对 象 实际 上 就 像 是 一 个 字符 数组 ， 其 中 也 包括 用 于 每 个 字符 
的 索引 属性 (虽然 这 个 特性 在 ES5 开 始 才 引入 ， 但 早已 被 各 大 浏览 器 文 
持 ， 除 了 早期 版 本 的 下) ， 以 及 整体 的 length 属 性 。 

> obj[0]; 

nw" 

> obj[4]; 

"dr 

> obj.length; 

5 

如 果 我 们 想 获 得 String 对 象 的 基本 类 型 值 ， 可 以 调用 该 对 象 的 
valueOfO 或 toString0) 方 法 〈 都 继承 自 Object 对 象 ) 。 不 过 您 可 能 很 少 有 
机 会 这 么 做 ， 因 为 在 很 多 场景 中 ，String 对 象 都 会 被 自动 转换 为 基本 类 
型 的 字符 串 。 

> obj.valueOf(); 

"world" 

> obj.toString(); 

"world" 

>obj+""; 


"world" 


而 基本 类 型 的 字符 串 就 不 是 对 象 了 ， 因 此 它们 不 含有 任何 属性 和 
方法 。 但 JavaScript 还 是 为 我 们 提供 了 一 些 将 基本 字符 串 类 型 转换 为 
String 对 象 的 语法 〈 就 像 我 们 之 前 转换 基本 类 型 的 数字 一 样 ) 。 

例如 在 下 面 的 示例 中 ， 当 我 们 将 一 个 基本 字符 串 当 做 对 象 来 使 用 
时 ， 后 台 就 会 相应 的 创建 Sring 对 象 ， 在 调用 完 之 后 又 把 String 对 象 给 
立即 销毁 。 

> "potato".length:; 

6 

> "tomato"[0]; 

tr 

> "potato"[ "potatoes" .length - 1]; 

"on 

最 后 我 们 再 来 看 一 个 说 明基 本 字符 串 与 String 对 象 之 间 区 别 的 例 
子 : 当 它 们 被 转换 成 布尔 值 时 ， 尽 管 空 字符 串 属 于 falsy 值 ， 但 所 有 的 
String 对 象 都 是 truthy 值 (因为 所 有 的 对 象 都 是 truthy 值 )。 


> Boolean(""); 


false 

> Boolean(new String("")); 

true 

与 Number() 和 Boolean() 类 似 ， 如 果 我 们 不 通过 new 操 作 符 来 调用 
String0， 它 驳 会 试图 将 其 参数 转换 为 一 个 基本 字符 串 。 

> String(1); 

"" 

如 果 其 参数 是 一 个 对 象 的 话 ， 这 就 等 于 调用 该 对 象 的 toString(0) 方 


法 。 


> String({p: 1}); 
"[object Object]" 


> String([1,2,3]); 
"1,2,3" 
> String([1, 2, 3]) === [1, 2, 3].toString(); 
true 
String 对 象 的 一 些 方法 
下 面 ， 让 我 们 来 示范 一 下 部 分 String 对 象 方法 的 调用 (如 果 想 获得 
完整 的 方法 列表 ， 可 以 参考 附录 C: 内 建 对 象 ) 。 
首先 从 新 建 String 对 象 开始 : 
> var s = new String("Couch potato"); 
接 下 来 是 用 于 字符 串 大 小 写 转 换 的 方法 ，toUpperCase(0) 与 


toLowerCase(): 


> s.toUpperCase(); 

"COUCH POTATO" 

> s.toLowerCasel(); 

"couch potato" 

charAt() 方 法 返回 的 是 我 们 指定 位 置 的 字符 ， 这 与 中 括号 的 作用 相 
当 (字符 串 本 身 就 古 一 个 字符 数组 ) 
> s.charAt(0); 
"Cr 

> S[0j]; 

"Cn 

如 果 我 们 传递 给 charAt() 方 法 的 位 置 并 不 存在 ， 它 就 会 返回 一 个 空 
字符 串 : 

> s.charAt(101); 


indexOf0) 方 法 可 以 帮助 我 们 实现 子 符 串 内 部 搜索 ， 该 方法 在 过 到 
匹配 字符 时 会 返回 第 一 次 匹配 位 置 的 索引 值 。 由 于 该 索引 值 是 从 0 开始 


计数 鸭 ， 所 以 字符 串 "Couch" 中 第 二 个 字符 "o" 的 索引 值 为 1。 

> s.indexOf('o"); 

1 

另外， 我 们 也 可 以 通过 可 选 参数 指定 搜索 开始 的 位 置 (以 索引 值 
的 形式 ) 。 例 如 下 面 所 找到 的 就 是 字符 串 中 的 第 二 个 "o"， 因 为 我 们 指 
定 的 搜索 是 从 索引 2 处 开始 的 。 

> s.indexOf('o', 2); 

7 

如 采 我 们 想 让 搜索 从 字符 串 的 末端 开始 ， 可 以 调用 lastIndexOf(O 方 
法 〈 但 返回 的 索引 值 仍 然 是 从 前 到 后 计数 的 ) 。 

> s.lastIndexOf('o"); 

11 

当然 ， 上 述 方 法 的 搜索 对 象 不 仅仅 局 限于 字符 ， 也 可 以 用 于 字符 
串 搜 索 。 并 且 搜 索 是 区 分 大 小 写 的 。 

> S.indexOf(CCouch' ); 

0 

如 果 方 法 找 不 到 匹配 对 象 ， 返回 的 位 置 索 引 值 就 为 -1: 

> S.indexOf(couch ); 

-1 
如 果 我 们 想 进行 一 次 大 小 写 无 关 的 搜索 ， 可 以 将 字符 串 转换 为 小 
写 后 再 执行 搜索 : 

> s.toLowerCase().indexOf('couch'); 

0 

如 果 相 关 的 搜索 方法 返回 的 索引 值 是 90， 就 说 明 字 符 串 的 匹配 部 分 
是 从 0 处 开始 的 。 这 有 可 能 会 给 让 语句 的 使 用 市 来 某 些 混 清 因素 ， 当 我 
们 像 下 面 这 样 使 用 Hf 语句 ， 整 会 将 索引 值 0 隐 式 地 转换 为 布尔 值 false， 
虽然 这 种 写法 没有 什么 语法 错误 ， 但 在 逻辑 上 却 完全 钳 了 : 


if (s.indexOf(Couch'")) {...} 

正确 的 做 法 是 : 当 我 们 用 主语 名 检测 一 个 字符 串 中 是 否 包含 另 一 
个 字符 串 时 ， 可 以 用 数字 -1 来 做 indexOf0 结 果 的 比较 参照 : 

if (s.indexOf(Couch'") !== -1) {...} 

接 下 来 ， 我 们 要 介绍 的 是 slice() 和 substring()， 这 两 个 方法 都 可 以 用 
于 返回 日 标 字 符 串 中 指定 的 区 间 : 

> s.slice(1, 5); 


"ouch" 


> s.substring(1, 5); 

"ouch" 

需要 提醒 的 是 ， 这 两 个 方法 的 第 二 个 参数 所 指定 的 都 是 区 间 的 末 
端 位 置 ， 而 不 是 该 区 间 的 长 度 。 这 两 个 方法 的 不 同 之 处 在 于 对 负 值 参 
数 的 处 理 方式 ，substring() 方 法 会 将 负 值 视 为 0， 而 slice() 方 法 则 会 将 它 
与 字符 串 的 长 度 相 加 。 因 此 ， 如 果 我 们 传 给 它们 的 参数 是 (1,-1) 的 话 ， 
它们 的 实际 情况 分 别 是 substring(1, 0) 和 slice(1,s.length-1): 


> s.slice(1, -1); 


"ouch potat" 

> s.substring(1, -1); 

"Cn 

还 有 一 个 方法 叫 substr0 ， 但 由 于 它 不 在 JavaScript 的 标准 中 ， 所 以 
您 应 该 尽量 用 substring0 去 代 蔡 它 。 

split() 方 法 可 以 根据 我 们 所 传递 的 分 割 字符 串 ， 将 目标 字符 串 分 割 
成 一 个 数组 。 例 如 : 

> s.split(" "); 


["Couch", "potato"] 
split() 是 join0 的 有 反 操 作 ， 后 者 则 会 将 一 个 数组 合并 成 一 个 字符 串 。 
例如 : 


> S.Split( ).join( "); 

"Couch potato" 

concat() 方 法 通常 用 于 合并 字符 串 ， 它 的 功能 与 基本 字符 串 类 型 的 
+ 操作 符 类 似 : 

> s.concat("es"); 

"Couch potatoes" 

需要 注意 的 是 ， 到 目前 为 止 ， 我们 所 讨论 的 方法 返回 的 都 是 一 个 
新 的 基本 字符 串 ， 它 们 所 做 的 任何 修改 都 不 会 改动 源 字符 串 。 所 有 的 
方法 调用 都 不 会 影响 原始 字符 串 的 值 。 

> s.valueOf(); 

"Couch potato" 

通常 情况 下 ， 我 们 会 用 indexOfO 和 lastIndexOfO 方 法 进行 字符 串 内 
搜索 ， 但 除 此 之 外 还 有 一 些 功 能 更 为 强大 的 方法 (如 search()、 
match()、replace0) 等 ) ， 它 们 可 以 以 正则 表达 式 为 参数 来 执行 搜索 任 
务 。 关 于 正则 表达 式 ， 我 们 将 会 在 稍 后 的 RegExp(0 构 造 右 函数 介绍 中 
加 以 详细 讨论 。 

现在 ， 数 据 封 装 类 对 象 已 经 全 部 介绍 完了 ， 接 下 来 ， 我 们 要 介绍 
一 些 工 具 类 对 象 ， 它 们 分 别 是 Math、Date 和 RegExp。 


4.2.7 Math 


Math 与 我 们 之 前 所 见 过 的 其 他 全 局 内 建 对 象 是 有 些 区 别 的 。Math 
对 象 不 是 函数 对 象 ， 所 以 我 们 不 能 对 它 调用 new 操作 符 ， 以 创建 别 的 
对 和 象 。 实 际 上 ，Math 只 是 一 个 包含 一 系列 方法 和 属性 、 用 于 数学 计算 
的 全 局 内 建 对 象 。 

Math 的 属性 都 是 一 些 不 可 修改 的 常数 ， 因 此 它们 都 以 名 字 大 写 的 
方式 来 表示 自己 与 一 般 属 性 变量 的 不 同 〈 这 类 似 于 Number0 构 造 器 的 


第 数 属性 ) 。 下 面 束 让 我 们 来 看 看 这 些 属 性 。 
数字 负数 fr: 
> Math.Pl; 
3.141592653589793 
2 的 平方 根 : 
> Math.SQRT2; 
1.4142135623730951 
欧 拉 常数 e: 加 
> Math.E; 
2.718281828459045 
2 的 目 然 对 数 : 
> Math.LN2; 
0.6931471805599453 
10 的 目 然 对 数 : 
> Math.LN10; 
2.302585092994046 
现在 ， 您 知道 下 次 该 如 何 忽悠 朋友 们 了 吧 ? 《无论 出 于 怎么 样 的 
复诊 理由 ) 当 他 们 开始 使 劲 回想 诸如 *e 的 值 是 什么 ? 我 怎么 态 记 了 ” 
时 ， 我 们 只 需要 轻松 地 在 控制 台中 输入 Math.E， 束 会 立即 得 到 答案 。 
接 下 来 ， 我 们 再 来 看 看 Math 对 象 所 提供 的 一 些 方 法 (完整 的 方法 
列表 请 见 附 录 C: 内 建 对 象 ) 
目 先 是 生成 随机 数 : 
> Math.random(); 
0.3649461670235814 
randomO 所 返回 的 是 0 到 1 之 间 的 某 个 数 ， 所 以 如 条 我 们 想 要 获得 0 
到 100 之 间 的 某 个 数 的 话 ， 束 可 以 这 样 : 
> 100 * Math.random(); 


如 果 我 们 需要 获取 的 是 某 max 和 min 之 间 的 值 ， 可 以 通过 一 个 公式 
(nax - min) *Math.random()) + min 来 获取 ， 例 如 ， 我 们 想 获 取 的 是 2 
到 10 之 间 的 某 个 数 ， 就 可 以 这 样 : 

> 8* Math.random() + 2; 

9.175650496668485 

如 果 这 里 需要 的 是 一 个 整数 的 话 ， 您 可 以 调用 以 下 取 整 方法 。 

floor0: 取 小 于 或 等 于 指定 值 的 最 大 整数 。 

ceil0: 取 大 于 或 等 于 指定 值 的 最 小 整数 。 

round0: 取 最 徘 近 指定 值 的 整数 。 

例如 ， 下 面 的 执行 结果 不 是 0 就 是 1: 

> Math.round(Math.random!()); 

如 果 我 们 想 获 得 一 个 数字 集合 中 的 最 大 值 或 最 小 值 ， 则 可 以 调用 
max() 和 min() 方 法 。 所 以 ， 当 我 们 在 一 个 表单 中 需要 一 个 合法 的 月 份 值 
时 ， 可 以 用 下 面 的 方式 来 确保 相关 的 数据 能 正常 工作 : 

> Math.min(Math.max(1, input), 12); 

除 此 之 外 ，Math 对 象 还 提供 了 一 些 用 于 执行 数学 计算 的 方法 ， 这 
些 计算 是 我 们 不 需要 去 专门 设计 即 可 使 用 的 。 这 意味 着 当 我 们 想 要 执 
行 指 数 运 算 时 只 需要 调用 pow0 方 法 即 可 ， 而 求 平 方 根 时 只 需要 调用 
sqrt()， 男 外 还 包括 所 有 的 三 角落 数 计 算 

例如 ， 求 2 的 8 次 方 : 

> Math.pow(2, 8); 

256 

求 9 的 平方 根 : 

> Math.sqrt(9); 

3 


sin()、 cos()、atan0 〇 等 。 


4.2.8 Date 


Date() 是 用 于 创建 Date 对 象 的 构造 器 函数 ， 我 们 在 用 它 创 建 对 象 时 
可 以 传递 以 下 几 种 参数 。 

无 参数 (默认 为 当天 的 日 期 。 

一 个 用 于 表现 日 期 的 字符 串 。 

分 开 传 递 的 日 、 月 、 时 间 等 值 。 

一 个 timestamp 值 。 [8 

下 面 是 一 个 表示 当天 日 期 和 时 间 的 对 象 示例 : 

> new Date(); 

Wed Feb 27 2013 23:49:28 GMT-0800 (PST) 

控制 台 显 示 了 Date 对 象 的 toString() 结 果 ， 因 此 这 里 的 长 字符 
串 "Wed Feb 27 2013 23:49:28 GMT-0800 (PST)" 实 际 上 就 是 这 个 Date 对 
象 的 字符 果 表 述 。 

接 下 来 ， 我 们 看 一 些 用 字符 串 初 始 化 Date 对 象 的 示例 ， 请 注意 它 
们 各 目 不 同 的 格式 以 及 所 指定 的 时 间 。 

> new Date('2015 11 12"); 

Thu Nov 12 2015 00:00:00 GMT-0800 (PST) 

> new Date(1 1 2016"); 

Fri Jan 01 2016 00:00:00 GMT-0800 (PST) 

> new Date(1 mar 2016 5:30"); 

Tue Mar 01 2016 05:30:00 GMT-0800 (PST) 

Date 构造 右 可 以 接受 各 种 不 同 格式 的 字符 串 日 期 输入 表示 法 ， 但 
如 要 定义 一 个 精确 的 日 期 ， 例 如 将 用 户 输入 直接 传递 给 Date 构造 句 ， 
这 样 做 显然 不 够 可 靠 。 更 好 的 选择 是 同 Date0 构 造 硕 传递 一 些 具 体 的 数 
值 ， 其 中 包括 : 

年 份 ; 

月 份 : 从 0 (1 月 ) 到 11 (12 月 ) ; 

日 期 : 从 1 到 31; 


时 数 : 从 0 到 23; 

分 钟 : 从 0 到 59; 

秒 钟 : 从 0 到 59; 

室 秒 数 : 从 0 到 999。 

现在 让 我 们 来 看 一 些 具体 示例 。 

如 采 我 们 传递 所 有 参数 : 

> new Date(2015, 0, 1, 17, 05, 03, 120); 
Tue Jan 01 2015 17:05:03 GMT-0800 (PST) 
如 果 只 传递 日 期 和 时 钟 值 : 

> new Date(2015, 0, 1, 17); 

Tue Jan 01 2015 17:00:00 GMT-0800 (PST) 
在 这 里 ， 我 们 需要 注意 一 件 事 ， 由 于 月 份 是 从 0 开始 的 ， 所 以 这 里 


的 1 指 的 是 2 月 : 


> new Date(2016, 1, 28); 
Sun Feb 28 2016 00:00:00 GMT-0800 (PST) 
如 果 我 们 所 传递 的 值 越过 了 被 允许 的 范围 ，Date 对 象 会 目 行 启动 


“溢出 式 ” 前 进 处 理 。 例 如 ， 由 于 2016 年 2 月 不 存在 30 日 这 一 天 ， 所 以 它 
会 自动 解释 为 该 年 的 3 月 1 日 (2016 年 为 图 年 ) 


> new Date(2016, 1, 29); 

Mon Feb 29 2016 00:00:00 GMTI-0800 (PST) 

> new Date(2016, 1, 30); 

Tue Mar 01 2016 00:00:00 GMT-0800 (PST) 

类 似 地 ， 如 果 我 们 传递 的 是 12 月 32 日 ， 就 会 被 自动 解释 为 来 年 的 1 


月 1 日 : 


> new Date(2012, 11, 31); 
Mon Dec 31 2012 00:00:00 GMT-0800 (PST) 
> new Date(2012, 11, 32); 


Tue Jan 01 2013 00:00:00 GMT-0800 (PST) 
最 后 ， 我 们 也 可 以 通过 timestamp 的 方式 来 初始 化 一 个 Date 对 象 
(这 是 一 个 以 毫秒 为 单位 的 UNIX 纪 元 方式 ， 开 始 于 1970 年 1 月 1 日 ) 。 

> new Date(1357027200000); 

Tue Jan 01 2013 00:00:00 GMT-0800 (PST) 

如 果 我 们 在 调用 Date0) 时 没有 使 用 new 操 作 符 ， 那 么 无 论 是 否 传递 
了 参数 ， 所 得 字符 串 的 内 容 始终 都 将 是 当前 的 日 期 和 时 间 (就 像 下 面 
示例 所 运行 的 那样 ) : 

> Date(); 

Wed Feb 27 2013 23:51:46 GMT-0800 (PST) 

> Date(1, 2, 3, "it doesn't matter"); 

Wed Feb 27 2013 23:51:52 GMT-0800 (PST) 

> typeof Date(); 

"string" 

> typeof new Date(); 

"object" 

Date 对 象 的 方法 

一 旦 我 们 创建 了 Date 对 象 ， 就 可 以 调用 该 对 象 中 的 许多 方法 。 其 
中 使 用 最 多 的 都 是 一 些 名 为 set*() 或 get*() 的 方法 ， 例 如 getMonth()、 
setMonth() 、getHours()、setHours() 等 等 。 下 面 我 们 来 看 一 些 具体 的 示 
例 。 

首先 ， 新 建 一 个 Date 对 象 : 

> var d = new Date(2015, 1, 1); 

> d.toString(); 

Sun Feb 01 2015 00:00:00 GMT-0800 (PST) 

然后 ， 将 其 月 份 设置 成 3 月 ( 记 住 ,月份 数 是 从 0 开始 的 ) : 

> d.setMonth(2); 


1425196800000 

> d.toString(); 

Sun Mar 01 2015 00:00:00 GMT-0800 (PST) 

接着 ， 我 们 读 取 月 份 数 : 

> d.get Month(); 

2 

除了 这 些 实例 方法 以 外 ，Date(0) 图 数 /对 象 中 还 有 男 外 两 个 方法 

(ES5 中 又 新 增 了 一 个 ) 。 这 两 个 属性 不 需要 在 实例 化 情况 下 使 用 ， 

工作 方式 与 Math 的 方法 基本 相同 。 在 基于 class 概 念 的 程序 设计 语言 
中 ， 它 们 往往 被 称 之 为 “静态 ”方法 ， 因 为 它们 的 调用 不 需要 依托 对 象 
实例 。 

例如 ，Date.parse() 方 法 会 将 其 所 接收 的 字符 捉 转 换 成 相应 的 
timestamp 格 式 ， 并 返回 : 

> Date.parse(Jan 11, 2018"); 

1515657600000 

而 Date.UTC0 方 法 则 可 以 接受 包括 年 份 、 月 份 、 日 期 等 在 内 的 所 有 
参数 ， 并 以 此 产生 一 个 相应 的 、 符 合格 林 尼 治 时 标准 的 timestamp 值 : 

> Date.UTC(2018, 0, 11); 

1515628800000 

由 于 用 Date 创建 对 象 时 可 以 接受 一 个 timestamp 参数 ， 因 此 我 们 
也 可 以 直接 将 Date.UTC() 的 结果 传递 给 该 构造 器 。 在 下 面 的 示例 中 ， 我 
们 演示 了 如 何在 新 建 Date 对 象 的 过 程 中 ， 将 UTC0O 返 回 的 格林 尼 治 时 间 
转换 为 本 地 时 间 : 

> new Date(Date.UTC(2018, 0, 11)); 

Wed Jan 10 2018 16:00:00 GMT-0800 (PST) 

> new Date(2018, 0, 11); 

Thu Jan 11 2018 00:00:00 GM1-0800 (PST) 


此 外 ，ES5 还 为 Date 构 造 器 新 增 了 now0 方 法 ， 以 用 于 返回 当前 
timestamp。 比 起 在 ES3 中 对 着 一 个 Date 对 象 调用 getTime() 方 法 而 言 ， 这 
种 新 方法 显然 更 为 简洁 。 

> Date.now\(); 

1362038353044 

> Date.now() === new Date().getTimel(); 

true 

您 可 以 认为 ,日 期 的 内 部 表达 形式 就 是 一 个 整数 类 型 的 
timestamp， 而 它 的 其 他 表达 形式 只 不 过 是 这 种 内 部 形式 的 “糖衣 ”。 这 
么 一 来 ， 我 们 就 很 容易 理解 为 什么 Date 对 和 象 的 valueOf() 返 回 的 是 一 个 
timestamp 数 据 : 

> new Date().valueOf(); 

1362418306432 

而 将 Date 转 换 为 整 型 则 只 需要 一 个 + 号 : 

> + new Date(); 

1362418318311 

例子 : 计算 生日 

下 面 ， 我 们 再 来 看 最 后 一 个 关于 Date 对 象 的 工作 示例 。 假 如 ， 我 
很 好 奇 自 己 2016 年 的 生日 (6 月 20 日 ) 是 星期 几 ， 就 可 以 这 样 : 

> var d = new Date(2016, 5, 20); 

> d.getDay(); 

1 

由 于 星期 数 是 从 0 (星期 日 ) 开始 计数 的 ， 因 此 ，1 应 该 代表 了 星 
期 一 。 我 们 来 验证 一 下 : 

> d.toDateString(); 

"Mon Jun 20 2016" 


好 吧 ， 星 期 一 是 不 错 ， 但 那 显 然 不 是 一 个 搞 派 对 的 最 佳 日 子 。 接 
下 来 我 要 弄 一 个 循环 ， 看 看 从 2016 年 到 3016 年 有 多 少 个 6 月 20 日 是 星期 
一 ， 并 查看 一 下 这 些 日 子 在 一 周 当中 的 分 布 情况 ( 嘿 ， 毕 竟 计 算 机 技 
术 这 么 发 达 ， 哪 天 DNA 整 侦 黑客 入 侵 了 ， 相 信 大 家 到 了 3016 年 还 是 会 
精神 拌 撒 的 。 

首先 ， 我 们 来 初始 化 一 个 包含 七 个 元 素 的 数组 ， 每 个 元 素 都 分 别 
对 应 痢 一 周 中 的 一 天 ， 以 元 当 计 数 姻 。 也 束 是 说 ， 在 循环 到 3016 年 的 
过 程 中 ， 我 们 将 会 根据 执行 情况 递增 相关 的 计数 絮 : 

var stats = [0,0,0,0,0,0,0]; 

接 下 来 就 是 该 循环 的 实现 : 

for (vari = 2016; i < 3016; i++) { 

stats[new Date(i, 5, 20).getDay()]++; 

} 

然后 ， 我 们 来 看 看 结 

> stats; 

[140, 146, 140, 145, 142, 142, 145] 

哇 哦 ! 有 142 个 星期 五 和 145 个 星期 六 ， 不 错 不 错 ! 


4.2.9 RegExp 


正则 表达 式 (regular expression) 提供 了 一 种 强大 的 文本 搜索 和 处 
理 方式 。 对 于 正则 表达 式 ， 不 同 的 语言 有 着 不 同 的 实现 〈《 束 像 * 方 
言 ”) ，JavaScript 所 采用 的 是 Perl 5 的 语法 。 

男 外 ， 为 简便 起 见 ， 人 们 经 常会 将 regular expression 缩 写成 regex 或 
者 regexp。 

一 个 正则 表达 式 通 常 由 以 下 部 分 组 成 。 

一 个 用 于 匹配 的 模式 文本 。 


用 0 个 或 多 个 修饰 符 (也 叫做 标志 ) 描述 的 匹配 模式 细 市 。 

该 匹配 模式 也 可 以 是 简单 的 全 字符 文本 ， 但 这 种 情况 极 少 ， 而 且 
此 时 我 们 多 半 会 使 用 indexOf(O) 这 样 的 方法 ， 而 很 少 会 用 到 正则 表达 
式 。 在 大 多 数 情况 下 ， 匹 配 模 式 往往 都 要 更 为 复杂 ， 也 更 难以 理解 。 
事实 上 ， 掌 握 正 则 表达 式 是 一 个 很 大 的 问题 ， 我 们 也 不 打算 在 这 里 详 
细 讨 论 它们 。 接 下 来 ， 我 们 只 会 介绍 它 在 JavaScript 中 的 语法 ， 以 及 可 
用 于 正则 表达 式 的 对 象 和 方法 。 男 外 ， 我 们 还 在 附录 D: 正则 表达 式 
中 提供 了 一 份 完整 的 匹配 模式 写法 指南 ， 以 供 读者 参考 。 

在 JavaScript 中 ， 我 们 通常 会 利用 内 建构 造 器 RegExp0 〇 来 创建 正则 
表达 式 对 象 ， 例 如 : 

> var re = new RegExp("'j.*t"); 

另外 ，RegExp 对 象 还 有 一 种 更 为 简便 的 正则 文本 标记 法 (regex 
literal notation) : 

> Var re = 三/].*t/; 

在 上 面 的 示例 中 ， 生 .*t* 就 是 我 们 之 前 说 的 正则 表达 式 模式 。 其 具 
体 舍 义 是 :“ 匹 配 任何 以 j 开 头 、t 绪 尾 的 字符 串 ， 且 这 两 个 字符 之 间 可 
以 包含 1 个 或 多 个 字符 。” 其 中 的 * 号 的 意思 就 是 “0 个 或 多 个 单元 ”， 而 
这 里 的 点 号 (.) 所 表示 的 是 “任意 字符 ”。 当 然 ， 当 我 们 向 RegExp 构 造 
需 传 递 该 模式 时 ， 还 必须 将 它 放 在 一 对 引号 中 。 

4.2.9.1 RegExp 对 象 的 属性 

以 下 是 一 个 正则 表达 式 对 象 所 拥有 的 属性 。 

gobal: 如 果 该 属性 值 为 false 〈 这 也 是 默认 值 ) ， 相 关 搜 索 在 找到 
第 一 个 匹配 时 就 会 停止 。 如 果 需 要 找 出 所 有 的 匹配 ， 将 其 设置 为 tue 即 
可 。 

ignoreCase: 设置 大 小 写 相 关 性 ， 默 认为 false。 

multiline: 设置 是 否 跨行 搜索 ， 默 认为 false 。 

lastIndex: 搜索 开始 的 索引 位 ， 默 认 值 为 0。 


source: 用 于 存储 正则 表达 式 匹 配 模式 。 

另外 ， 除 了 lastIndex 外 ， 上 面 所 有 属性 在 对 象 创建 之 后 就 都 不 能 
被 修改 了 。 

而 且 ， 前 三 个 属性 是 可 以 通过 regex 修饰 符 来 表示 的 。 当 我 们 通过 
构造 器 来 创建 regex 对 象 时 ， 可 以 向 构造 器 的 第 二 参数 传递 下 列 字 符 中 
的 任意 组 合 。 

“g” 代 表 global 。 

“ii” 代表 ignoreCase 。 

“m” 代 表 multiline 。 

这 些 字 符 可 以 以 任意 顺序 传递 ， 只 要 它们 被 传递 给 了 构造 器 ， 相 
应 的 修饰 符 就 会 被 设置 为 tue。 例 如 在 下 面 的 示例 中 ， 我 们 将 所 有 的 修 
饥 符 都 设置 成 了 true: 

> var re = new RegExp(]j.*t',, 'gmi'); 

现在 来 验证 一 下 : 


> re.global; 


true 
不 过 ， 这 里 的 修饰 香 一 旦 被 设置 了 束 不 能 更 改 : 


> re.global = false; 


> re.global; 

true 

另外 ， 我 们 也 可 以 通过 文本 方式 来 设置 这 种 regex 的 修饰 符 ， 只 需 
将 它们 加 在 斜 线 后 面 : 


> Var re = /).*t/ig; 


> re.global; 
true 
4.2.9.2 RegExp 对 象 的 方法 


RegExp 对 象 中 有 两 种 可 用 于 查找 匹配 内 容 的 方法 : testO 和 
exec()。 这 两 个 方法 的 参数 都 是 一 个 字符 串 ， 但 test(0) 方 法 返回 的 是 一 个 
布尔 值 (找到 匹配 内 容 时 为 tue， 否 则 就 为 false) ， 而 exec0O 返 回 的 则 
是 一 个 由 匹配 到 的 字符 串 组 成 的 数组 。 显 然 ，exec0) 能 做 的 工作 更 多 ， 
而 test0 只 有 在 我 们 不 需要 匹配 的 具体 内 容 时 才 会 有 所 用 处 。 人 们 通常 
会 用 正则 表达 式 来 执行 某 些 验证 操作 ， 在 这 种 情况 下 往往 使 用 test() 束 
足够 了 。 

下 面 的 表达 式 是 不 匹配 的 ， 因 为 目标 中 是 大 写 的 J: 


> /j.*t/.test("Javascript"); 


false 

如 果 将 其 改 成 大 小 写 无 关 的 ， 结 果 束 返回 true 了 : 

> /j.*t/i.test("Javascript"); 

true 

同样 的 ， 我 们 也 可 以 用 测试 一 下 exec0 方 法 ， 并 访问 它 所 返回 数组 
的 让 元 训 ， 

> /j.*t/i.exec("Javascript")[0j; 

"Javascript" 

4.2.9.3 以 正则 表达 式 为 参数 的 字符 串 方 法 

在 本 章 前 面 ， 我 们 曾 向 您 介绍 过 如 何 使 用 String 对 象 的 IndexOf() 和 
lastIndexOf() 方 法 来 搜索 文本 。 但 这 些 方法 只 能 用 于 纯 字 符 串 式 的 搜 
索 ， 如 采 想 获得 更 强大 的 文本 搜索 能 力 就 需要 用 到 正则 表达 式 了 。 
String 对 象 也 为 我 们 提供 了 这 种 能 

在 String 对 象 中 ， 以 正则 表达 式 对 象 为 参数 的 方法 主要 有 以 下 这 
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match() 方 法 : 返回 的 是 一 个 包含 匹配 内 容 的 数组 。 
search() 方 法 : 返回 的 是 第 一 个 匹配 内 容 所 在 的 位 置 。 
replace() 方 法 : 该 方法 能 将 匹配 的 文本 替换 成 指定 的 字符 串 。 


split() 方 法 : 能 根据 指定 的 正则 表达 式 将 目标 字符 串 分 割 成 奉 干 个 
数组 元 素 。 

4.2.9.4 search() 与 match() 

下 面 来 看 一 些 searchO 与 match() 方 法 的 用 例 。 首 先 ， 我 们 来 新 建 一 
个 String 对 象 : 

>vVvar s=new String(HelloJavaScriptWorld ); 


然后 调用 其 match() 方 法 ， 这 里 返回 的 结果 数组 中 只 有 一 个 匹配 对 


> s.match(/a/); 

["a"] 

接 下 来 ， 我 们 对 其 施加 g 修 师 符 ， 进 行 global 搜 索 ， 这 样 一 来 返回 
的 数组 中 整 有 了 两 个 结 

> s.match(/a/g); 

["a", "a"] 

下 面 进 行 大 小 写 无 关 的 匹配 操作 : 

> s.match(/j.*a/i); 

["Java"] 

而 search() 方 法 则 会 返回 匹配 字符 串 的 索引 位 置 : 

> s.search(/j.*a/i); 

5 

4.2.9.5 replace() 

replace() 方 ; | 在 下 
面 的 示例 中 ， 我 们 移 除 了 目标 字符 串 中 的 所 有 大 写字 符 《实际 上 是 替 
换 为 空 字符 串 ) : 

> S.Teplace(/LA-Z]/g，); 

"elloavacriptorld" 


如 末 我 们 名 上 略 了 g 修 饰 牺 ， 结 末 束 只 有 首 个 匹配 子 符 被 蕉 换 挥 : 


> s.replace(/[A-Z1/, "); 

"elloJavaScriptWorld" 

当 某 个 匹配 对 象 被 找到 时 ， 如 果 我 们 想 让 相关 的 替换 字符 串 中 包 
舍 匹 配 的 文本 ， 可 以 使 用 $& 来 代替 所 找到 的 匹配 文本 。 人 例如， 下面 我 
们 在 每 一 个 匹配 字符 前 面 加 了 一 个 下 划 线 : 

> s.replace(/[A-Z]/g, "_$&"); 

"_Hello_Java_Script_World" 

如 果 正 则 表达 式 中 分 了 组 〈 即 带 括号 ) ， 那 么 可 以 用 $1 来 表示 匹 
配 分 组 中 的 第 一 组 ， 而 $2 则 表示 第 二 组 ， 以 此 类 推 。 

> s.replace(/([A-Z1)/g, "_$1"); 

"_Hello_Java_Script_World" 

假设 我 们 的 Web 页 面 上 有 一 个 注册 表单 ， 上 面 会 要 求 用 户 输 入 E- 
mail 地 址 、 用 户 名 和 冤 码 。 当 用 户 输 入 他 们 的 E-mail 地 址 时 ， 我 们 可 以 
利用 JavaScript 将 E-mail 的 前 半 部 分 提炼 出 来 ， 作 为 后 面 用 户 名 字段 的 
建议 : 


> var email = "stoyan@phpied.com'"; 


> var username = email.replace(/(.*)@.*/, "$1"); 

> Username; 

"stoyan" 

4.2.9.6 回调 式 替换 

当 我 们 需要 执行 一 些 特定 的 替换 操作 时 ， 也 可 以 通过 返回 字符 串 
的 函数 来 完成 。 这 样 ， 我 们 就 可 以 在 执行 蔡 换 操作 之 前 实现 一 些 必要 
的 处 理 逻 辑 : 

> function replaceCallback(match){ 

return "_" + match.toLowerCase(); 
} 
> s.replace(/[A-Z]/g, replaceCallback); 


”hello_java_script world" 


该 回调 函数 可 以 接受 一 系列 的 参数 〈 在 上 面 的 示例 中 ， 我 们 名 略 


了 所 有 参数 ， 但 首 参数 是 依然 存在 的 ) 


目 参 数 古 正则 表达 式 所 匹配 的 内 容 。 

尾 参数 则 是 被 搜索 的 字符 串 。 

尾 参 数 之 前 的 参数 表示 的 是 匹配 内 容 所 在 的 位 置 。 

剩 下 的 参数 可 以 是 由 regex 模式 所 分 组 的 所 有 匹配 字符 哩 组 。 

下 面 让 我 们 来 具体 测试 一 下 。 首 先 ， 我 们 新 建 一 个 变量 ， 用 于 存 


储 之 后 传递 给 回调 函数 的 整个 arguments 对 象 : 


> var glob; 


下 一 步 古 定义 一 个 正则 表达 式 ， 我 们 将 E-mail 地 址 分 成 三 个 匹配 


， 具 体格 式 形 如 something@something.something: 


> var re = /(.*)@(.*N\.(.*)/; 
最 后 束 古 定义 相应 的 回调 函数 了 ， 它 会 接受 glob 数 组 中 的 参数 ， 并 


返回 相应 的 车 换 内 容 : 


var callback = function(){ 

glob = arguments; 

return arguments[1]+ 'at' + arguments[2] + ' dot ' +arguments[3]; 
}; 
然后 我 们 就 可 以 这 样 调用 它们 了 : 
> "stoyan@phpied.com".replace(re, callback); 
"stoyan at phpied dot com" 
下 面 是 该 回调 函数 返回 的 参数 内 容 : 
> glob; 


["stoyan@phpied.com,", "stoyan", "phpied", "com,", 0， 


"stoyan@phpied.com'"| 


4.2.9.7 split0) 


我 们 之 前 已 经 了 解 split0 方 法 ， 它 能 根据 指定 的 分 割 字 符 串 将 我 们 
的 输入 了 字符 捉 分 割 成 一 个 数组 。 下 面 束 是 我 们 用 逗号 将 字符 串 分 割 的 


结果 : 

> Var CSV = 'one, two,three ,four'; 

> csv.split(','); 

["one", " two", "three ", "four"] 

由 于 上 面 的 输入 字符 串 中 存在 逗号 前 后 的 空格 不 一 致 的 情况 ， 这 
导致 生成 的 数组 也 会 出 现 多 余 的 空格 。 如 果 我 们 使 用 正则 表达 式 ， 瓯 
可 以 在 这 里 用 \s* 修 饰 符 来 解决 ， 意 思 就 是 “匹配 0 个 或 多 个 空格 ”: 

> csv.split(As*,\s*/); 

["one", "two", "three", "four"| 

4.2.9.8 用 字符 串 来 代替 过 于 简单 的 regexp 对 象 

关于 我 们 刚刚 讨论 的 四 个 方法 (split() 、matchO) 、search0O 和 
replace()) ， 还 有 最 后 一 件 事 不 得 不 提 ， 即 这 些 方法 可 以 接受 的 参数 不 
仅仅 是 一 些 正 则 表达 式 ， 也 包括 字符 串 。 它 们 会 将 接收 到 的 字符 串 参 
数目 动 转 换 成 regex 对 象 ， 惑 像 我 们 直接 传递 new RegExp() 一 样 。 

例如 ， 下 面 的 replace() 方 法 直接 使 用 字符 串 参 数 来 执行 蔡 换 : 


> "test".replace('t', r'); 


"rest" 
它 与 下 面 的 调用 是 等 价 的 : 
> "test".replace(new RegExp(t'), 7'"); 


"rest" 

当然 ， 在 执行 这 种 字符 串 传递 时 ， 我 们 就 不 能 像 平时 使 用 构造 各 
或 者 regex 文本 法 那样 设置 表达 式 修 饥 待 了 。 使 用 字符 串 而 不 是 正则 表 
达 式 来 琵 换 文本 比较 帝 见 的 错误 是 ， 使 用 者 往往 会 误 以 为 原 字 符 串 中 
所 有 的 匹配 都 会 奉 换 。 然 而 如 上 所 述 ， 以 字符 串 为 参数 的 replace0 其 


记 obal 修 饰 符 的 值 将 为 false， 即 只 有 第 一 个 修 匹 配 到 的 字符 串 才 会 被 叔 
换 。 这 与 其 他 一 些 编程 语言 不 同 ， 从 而 容易 导致 混淆 。 例 如 : 


> "pool".replace('o', *"); 


"p*o]" 
而 使 用 者 大 多 数 情况 下 的 意图 是 替换 所 有 的 匹配 : 
> "pool".replace(/o/g, "*"); 

"p**]" 


4.2.10 Error 对 象 


当代 码 中 有 错误 发 生 时 ， 一 个 好 的 处 理 机 制 可 以 帮助 我 们 理解 错 
误 发 生 的 原因 ， 并 且 使 我 们 能 以 一 种 较为 优雅 的 方式 来 纠正 错误 。 在 
JavaScript 中 ， 将 会 使 用 try、catch 及 finally 语 句 组 合 来 处 理 错 误 。 当 程 
序 中 出 现 错误 时 ， 职 会 抛 出 一 个 Error 对 象 ， 该 对 象 可 能 由 以 下 几 个 内 
建构 造 器 中 的 一 个 产生 而 成 ， 它 们 包括 EvalError 、RangeError 、 
ReferenceError、SyntaxError、TypeError 和 URIError 等 ， 所 有 这 些 构造 
如 都 继承 目 Error 对 象 。 

下 面 ， 我 们 来 主动 触发 一 个 错误 ， 看 看 会 发 生 些 什 么 。 下 面 的 示 
例 中 调用 了 一 个 并 不 存在 的 函数 ， 控 制 台中 输入 : 

> iDontExist(); 


我 们 束 会 看 到 如 图 4-3 所 示 的 内 容 。 


个 日 日 Developer Tools - chrome://newtab/ 坟 


Bel 天 | 局 WN J 


Elements Resources Network 
> iDontExist( ) ， 


BF ReferenceError: iDontExist is not defined 
>» 


加 六 Q ee <topframe> $ WD | Errors Warnings Logs 痒 


图 4-3 
普 误 显示 的 方式 在 各 浏览 器 和 宿主 环境 中 差别 可 能 会 很 大 。 事 实 
上 ， 大 多 数 现代 浏览 右倾 向 于 向 用 户 隐 藏 错误 ， 但 不 能 因此 束 假 设 我 
们 所 有 的 用 户 都 会 屏蔽 错误 显示 ， 而 制作 一 个 没有 错误 、 用 户 体验 完 
美的 页 面 理所当然 是 开发 者 的 责任 。 在 上 面 的 例子 中 ， 错 误 被 显示 是 
因为 我 们 没有 尝试 捕获 (catch) 这 个 错误 。 程 序 既 没有 预测 到 这 里 会 
出 现 错误 ， 也 不 知道 怎样 处 理 这 个 错误 。 骏 运 的 是 ， 错 误 捕 获 很 容 
易 ， 只 需要 我 们 使 用 try 语 句 后 接 一 个 catch 语 句 即 可 。 
例如 添加 下 面 代码 ， 我 们 惑 不 会 看 到 之 前 截图 中 的 那个 错误 显示 
i 
try { 
iDontExist(); 
} catch (e){ 
// do nothing 
} 
如 您 所 见 ， 这 里 包含 两 部 分 内 容 。 
try 语句 及 其 代码 块 。 
catch 语 句 及 其 参数 变量 和 代码 块 。 


finally 语 句 并 没有 在 这 个 例子 中 出 现 ， 这 是 一 个 可 选项 ， 主 要 用 于 
执行 一 些 无 论 如 何 (无 论 有 没有 错误 发 生 ) 都 要 执行 的 内 容 。 

在 上 面 的 示例 中 ， 我 们 并 没有 在 catch 语 句 后 面 的 代码 块 中 写 入 任 
何 内 容 ， 但 实际 上 我 们 可 以 在 这 里 加 入 一 些 用 于 修复 错误 的 代码 ， 或 
者 至 少 可 以 将 该 应 用 程序 错误 的 一 些 特 定 情 况 反 馈 给 用 户 。 

catch 语 句 的 参数 (括号 中 的 ) e 实 际 上 是 一 个 Error 对 象 。 跟 其 他 对 
象 一 样 ， 它 也 提供 一 系列 有 用 的 方法 与 属性 。 遗 憾 的 是 ， 不 同 的 浏览 
锋 对 于 这 些 方法 与 属性 都 有 着 各 目 不 同 的 实现 ， 但 其 中 有 两 个 属性 的 
实现 还 是 基本 相同 的 ， 那 区 是 ename 和 e.message 。 

现在 ， 让 我 们 来 看 看 这 段 代 码 : 

try { 

iDontExist(); 
} catch (e){ 

alert(e.name + ': ' + e.message); 
} finally { 

alert('Finally!'); 

} 

如 您 所 见 ， 这 里 的 第 一 个 alert0 显 示 了 e.name 和 e.message， 而 后 一 
个 则 显示 了 Finally! 字样 。 

在 Firefox 和 Chrome 中 ， 和 第 一 个 alert0 将 显示 的 内 容 是 
ReferenceError: iDontExist is not defined。 而 在 Internet Explorer 中 则 是 
TypeError: Object expected。 避 之 ， 这 里 同 我 们 传递 了 两 个 信息 : 

e.name 所 包含 的 是 构造 当前 Error 对 象 的 构造 器 名 称 。 

由 于 Error 对 象 在 各 宿主 环境 〈 浏 览 右 ) 中 的 表现 并 不 一 致 ， 因 此 
在 这 里 我 们 需要 使 用 一 些 技巧 ， 以 便 我 们 的 代码 能 处 理 各 种 类 型 的 错 
误 〈 即 ename 的 值 ) 。 


义 一 个 Error 对 象 ， 然 后 告 
throw 语 句 来 抛 出 该 对 象 。 


当然 ， 我 们 也 可 以 用 new Error() 或 者 其 他 Error 对 象 构造 器 来 自 定 


诉 JavaScript 引 擎 某 个 特定 的 条 件 ， 并 使 用 


下 面 来 看 一 个 具体 的 示例 ， 假 设 我 们 需要 调用 一 个 maybeExists() 函 


try { 
var total = maybeExists(); 
if (total === 0) { 
throw new Error(Division by zero!'); 
} else { 
alert(50 / total); 
} 
} catch (e){ 
alert(e.name + ': ' + e.message); 
} finally { 
alert('Finally!'); 
} 
根据 maybeExists0) 落 数 的 存在 与 否 及 其 返回 值 ， 


种 不 同 的 信息: 


数 ， 并 将 函数 返回 结果 作为 除数 来 执行 除法 运算 。 我 们 想 统一 进行 错 


误 处 理 ， 无 论 错误 原因 是 maybeExists() 函 数 不 存 在 ， 还 是 返回 值 不 是 我 
们 想 要 的 ， 那 么 代码 都 应 该 这 样 写 : 


这 段 代码 会 弹出 几 


如 果 maybeExistsO 函 数 不 存 在 ， 我 们 在 Firefox 中 将 会 得 到 信息 


“ReferenceError: maybeExists() is not defined”， 


“TypeError:Object expected”。 


而 在 正中 则 为 


如 果 maybeExists0 返 回 值 为 0， 我 们 将 得 到 的 信息 是 “Error: Division 


by zero!” ° 


如 果 maybeExists() 的 返回 值 为 2， 我 们 将 得 到 的 alert 信息 是 25。 


在 以 上 所 有 的 情况 下 ， 程 序 都 会 弹出 第 二 个 alert 窗 口 ， 内 容 为 
“Finally! ”。 

男 外 ， 这 里 抛 出 的 是 一 般 性 的 错误 提示 ， 使 用 的 是 throw new 
Error('Division by zero!") 语 句 ， 然 而 我 们 也 可 以 根据 自 呈 的 需要 来 明确 
错误 类 型 。 例 如 可 以 利用 throw new RangeError('Division by zero!") 语 句 
来 抛 出 该 错误 ， 或 者 不 用 任何 构造 器 ， 直 接 定 义 一 个 一 般 对 象 抛 出 : 

throw { 

name: "MyError", 
message: "OMG! Something terrible has happened" 

} 

这 样 一 来 ， 我 们 束 可 以 使 用 目 定 义 的 Error 名 ， 从 而 解决 了 浏 贤 句 
之 间 由 于 抛 出 错误 不 相同 所 导致 的 问题 。 


4.3 小 结 


在 第 2 章 : 基本 数据 类 型 、 数 组 、 循 环 及 条 件 表达 式 中 ， 我 们 学 
习 了 JavaScript 的 五 大 基本 数据 类 型 number、string、boolean、null 和 
undefined) ， 而 且 ， 我 们 也 说 过 除 这 些 基 本 类 型 以 外 的 任何 数据 都 属 
于 对 象 。 在 本 章 ， 我 们 又 了 解 了 以 下 内 容 : 

对 象 与 数组 很 类 似 ， 但 它 还 允许 我 们 指定 键 值 。 

对 象 通 单 都 会 拥有 者 干 个 属性 。 

其 中 有 些 属 性 可 以 是 函数 (函数 本 身 也 是 数据 ， 回 忆 下 varf = 
function() {};) 。 这 些 属 性 通常 称 为 方法 。 

数组 本 吴 也 可 以 看 做 拥有 一 系列 数字 属性 ， 并 外 加 一 个 会 目 动 增 
长 的 length 属性 的 对 象 。 

Array 对 象 中 有 着 一 系列 非常 有 用 的 方法 〈 例 如 sort0 和 sliceO) 。 


函数 也 是 一 种 对 象 ， 它 们 本 身 也 有 属性 《〈 例 如 length 和 
prototype) 和 方法 〈 例 如 call0 和 applyO) 。 

对 于 五 种 基本 数据 类 型 ， 除 了 undefined 和 null 外 ， 其 他 三 个 都 有 相 
应 的 构造 锅 男 数 ， 分 别 是 Number0、String0 以 及 Boolean0。 通 过 它们 
我 们 可 以 创建 出 相应 的 对 象 。 通 过 将 这 些 基本 类 型 封装 成 对 象 ， 我 们 
就 可 以 在 其 中 集成 一 些 有 用 的 工作 方法 。 

Number()、String() 以 及 Boolean0 的 调用 可 分 为 两 种 形式 : 

使 用 new 操作 符 调 用 一 一 用 于 新 建 对 象 。 

不 使 用 new 操作 符 调用 一 一 用 于 将 任意 值 转换 成 基本 数据 类 型 。 

此 外 ， 我 们 还 学 习 了 一 系列 内 建构 造 器 函数 ， 其 中 包括 Object()、 
Array()、Function()、Date()、RegExp() 和 Error()， 以 及 不 属于 构造 絮 的 
全 局 对 象 Math 。 

现在 ， 我 们 应 该 明白 对 象 在 JavaScript 程序 设计 中 的 中 心地 位 ， 几 
乎 所 有 的 东西 都 是 对 象 ， 或 者 可 以 封装 成 对 象 。 

最 后 ， 让 我 们 再 来 熟悉 一 下 对 象 的 文本 标识 法 ( 见 表 4-2) 。 

表 4-2 


名 称 构造 器 相关 示例 


对 象 new Object () {Biops: 2} 


数组 new Array () [ly2. a Br EEE:] 


new RegExp('pattern', 
正则 表达 式 /pattern/modifiers /java.*/img 
'modifiers') 


4.4 练习 题 


1. 请 看 下 列 代码 : 
function F() { 


function CO { 
return this; 

} 

return C(); 
} 
var 0 = new F(); 
请 问 上 面 的 this 值 指向 的 是 全 局 对 象 还 是 对 象 o? 
2. 下 面 代码 的 执行 结果 会 是 什么 ? 
function CO{ 

this.a = 1; 


return false; 
} 
console.log(typeof new C()); 
3. 下 面 这 段 代码 的 执行 结果 又 将 是 什么 ? 
>C=[1, 2, [1 2]]; 
> c.sort(); 
> c.join('--'); 
> console.log(c); 
4. 在 String0 构 造 絮 不 存在 的 情况 下 目 定义 一 个 MyString0 的 构造 
器 画 数 。 记 住 ， 由 于 String0) 不 存在 ， 因 此 您 在 写 该 构造 器 画 数 时 不 能 
使 用 任何 属于 内 建 String 对 象 的 方法 和 属性 。 并 且 要 让 您 所 创建 的 对 象 
通过 以 下 测试 : 
> var s =new MyString('hello'); 
> s.length; 
5 
> S[0j]; 
"hp" 


> s.toString(); 
"hello" 
> s.valueOf(); 
"hello" 
> s.charAt(1); 
"en" 
> s.charAt(2"); 
由" 
> S$.CharAt(e'); 
"pr" 
> s.concat(' world!'); 
"hello world!" 
> s.slice(1,3); 
"ey" 
> s.slice(0,-1); 
"hell" 
> s.split('e'); 
["h", "llo"] 
> s.split('1"); 
["he", "", "o"] 
将 输入 字符 串 当做 一 个 数组 ， 用 for 循 环 来 进行 遍历 。 
5. 更 新 上 面 的 MyString() 构 造 器 ， 为 其 添加 一 个 reverse() 方 法 。 
可 以 党 斌 利用 数组 本 里 的 reverse() 方 法 。 
6. 在 Array0 构 造 右 以 及 相关 的 数组 文本 标识 法 都 不 存在 的 情况 
目 定义 一 个 类 似 的 MyArray0 构 造 絮 ， 并 令 其 通过 以 下 测试 : 
> var a = new MyArray(1,2,3, "test"); 
> a.toString(); 


"1,2,3,test" 
> a.length; 
4 
> a[a.length - 1]; 
"test" 
> a.push('boo'); 
5 
> a.toString(); 
"1,2,3,test,boo" 
> a.popQ); 
[boo] 
> a.toString(); 
"1,2,3,test" 
> a.join(','); 
"1,2,3,test" 
> a.join(' isn\'t "); 
"1 isn't 2 isn't 3 isn't test" 
如 果 您 觉得 这 个 练习 很 有 趣 ， 可 以 不 用 止步 于 join0 方 法 ， 继 续 为 
其 创建 尽 可 能 多 的 方法 。 
7. 在 Math 对 象 不 存在 的 情况 下 ， 创 建 一 个 类 似 的 MyMath 对 象 ， 
并 为 其 添加 以 下 方法 : 
MyMath.rand(min, max, inclusive) 随机 返回 min 到 max 区 间 中 
的 一 个 数 ，inclusive 为 true 时 为 闭 区 间 (这 也 是 默认 情况 ) 。 


MyMath.min(array) 返回 目标 数组 中 的 最 小 值 。 
MyMath.max(array) 返回 目标 数组 中 的 最 大 值 。 
注 释 


[1 注意 ，retumn 语句 中 使 用 的 是 大 括号 ， 也 就 是 说 {b:2} 是 一 个 独立 的 对 象 。 一 一 译 者 注 


第 5 音 原型 


在 本 章 ， 我 们 将 着 重 介绍 函数 对 象 中 的 原型 (prototype) 属性 。 
对 于 JavaScript 的 学 习 来 说 ， 理解 原型 的 工作 原理 是 非常 重要 的 一 环 ， 
毕竟 ， 它 的 对 象 模 型 经 党 被 视 为 是 基于 原型 的 。 当 然 ， 要 理解 原型 其 
实 并 不 是 一 件 很 难 的 事 ， 只 不 过 由 于 这 是 一 个 全 新 的 概念 ， 我 们 接受 
起 来 需要 一 点 时 间 罢 了 。 事 实 上 在 JavaScript 中 ， 像 原型 或 闭 包 〈 见 第 
3 章 : 函数 ) 这 样 的 概念 ， 只 要 我 们 能 “领悟 ”其 中 的 原理 ,一切 都 会 显 
得 格外 人 简单 而 清晰 。 而 且 在 后 续 内 容 中 ， 本 书 还 会 围绕 原型 概念 展开 
大 量 的 示例 演示 ， 以 帮助 读者 巩固 并 加 深 对 这 一 概念 的 熟悉 程度 。 

总 体 而 言 ， 本 章 将 涉及 以 下 话题 

介绍 每 个 函数 都 拥有 的 prototype 属性 ， 而 该 属性 所 存储 的 就 是 原 
型 对 象 。 

如 何 为 原型 对 象 添 加 属性 。 

如 何 使 用 原型 对 象 中 的 新 增 属性 。 

如 何 区 分 对 和 象 目 喘 属性 与 原型 属性 。 

_ proto 介绍 ， 该 属性 用 于 保存 各 对 象 原型 的 神秘 链接 。 

原型 方法 人 简介 ， 包 括 isPrototypeOf() 、 hasOwnProperty() 、 
propertyIs Enumerable() 等 。 

介绍 如 何 (利用 原型 强化 数组 或 字符 串 这 样 的 内 建 对 象 (并 说 
明 这 样 做 的 星 端 ) 。 


5.1 原型 属 ' 


在 JavaScript 中 ， 尔 数 本 身 也 是 一 个 包含 了 方法 和 属性 的 对 象 。 经 
过 之 前 的 学 习 ， 相 信 我 们 对 它 的 一 些 方法 (如 apply0 和 call0) 及 属性 
(如 length 和 constructor) 已 经 不 会 感到 陌生 了 。 接 下 来 ， 我 们 要 介绍 
的 是 函数 对 象 的 另 一 个 属性 prototype 。 

众所周知 ， 只 要 我 们 像 下 面 这 样 简单 地 定义 一 个 函数 foo0， 束 可 
以 像 访问 其 他 对 象 一 样 访问 该 男 数 的 属性 : 


> function foo(a, b){ 


return a *b; 

} 

> foo.length 

2 

> foo.constructor:; 

function Function(){[native code]} 

而 这 些 〈 在 函数 定义 时 被 创建 的 ) 属性 中 就 包括 有 prototype 属 
性 ， 它 的 初始 值 是 一 个 “ 空 ” 对 象 。 

> typeof foo.prototype; 


"object" 

当然 ， 我 们 也 可 以 目 己 添加 该 属性 ， 就 像 这 样 : 

> foo.prototype = {}; 

而 且 我 们 还 可 以 赋予 这 个 空 对 象 一 些 方法 和 属性 ， 这 并 不 会 对 foo 
函数 本 号 造 成 什么 影响 ， 因 为 只 有 当 foo0 作 为 构造 器 使 用 时 ， 这 些 属 
性 才 会 起 作用 。 


5.1.1 利用 原型 添加 方法 与 属性 


在 上 一 章 中 ， 我 们 已 经 学 会 了 如 何 定义 构造 大 图 数 ， 并 用 和 它 来 新 
建 (构造 ) 对 象 。 这 种 做 法 的 主要 意图 是 通过 new 操 作 符 来 调用 画 
数 ， 以 达到 访问 对 象 this 值 的 目的 ， 然 后 ， 通 过 this 我 们 就 可 以 访问 构 
造 器 所 返回 的 对 象 了 。 这 样 ， 我 们 或 有 了 一 种 赋予 新 建 对 象 一 定 功 能 
( 即 为 其 添加 属性 和 方法 ) 的 方法 。 
下 面 ， 我 们 来 构建 一 个 具体 的 构造 郁 画 数 GadgetOD ， 看 看 它 究竟 
征 如 何在 新 建 对 象 时 为 其 添加 属性 与 方法 的 。 


function Gadget(name, color) { 


this.name = name: 
this.color = color; 
this.whatAreYou = function(){ 


return 'T am a' + this.color + ''+ this.name: 


} 

当然 ， 添 加 属性 和 方法 还 有 另 一 种 方式 ， 即 通过 构造 右 函 数 的 
prototype 属性 来 增加 该 构造 器 所 能 提供 的 功能 。 下 面 就 让 我 们 为 上 面 
的 构造 器 增加 两 个 属性 (price 和 rating) 和 一 个 方法 ( 即 getInfo()) 
吧 。 由 于 prototype 属 性 包含 的 是 一 个 对 象 ， 所 以 您 可 以 这 样 : 

Gadget.prototype.price = 100; 

Gadget.prototype.rating = 3; 

Gadget.prototype.getInfo = function() { 

return 'Rating: ' + this.rating +', price: ' + this.price; 

上 
如 果 您 不 想 将 它们 逐一 添加 到 原型 对 象 中 去 ， 也 可 以 男 外 定义 一 
个 对 象 ， 然 后 将 其 覆 新 到 之 前 的 原型 上 : 

Gadget.prototype = { 


price: 100, 


rating: ... /* and so on... */ 


}; 
5.1.2 使 用 原型 的 方法 与 属性 


在 癌 prototype 属性 中 添加 完 所 有 的 方法 和 属性 后 ， 我 们 束 可 以 直 
接 用 该 构造 器 来 狐 建 对 象 了 。 例 如 在 下 面 的 代码 中 ， 我 们 用 构造 器 
Gadget() 新 建 了 一 个 newtoy 对 象 ， 然 后 您 整 可 以 访问 之 前 所 定义 的 那些 
属性 和 方法 了 。 


> Var newtoy = new Gadget(‘webcam,', 'black'); 


> newtoy.name; 

"webcam" 

> newtoy.color; 

"black" 

> newtoy.whatAreYou(); 

"Iam a black webcam" 

> newtoy.price; 

100 

> newtoy.rating,; 

3 

> newtoy.getInfo(); 

"Rating: 3, price: 100" 

对 于 原型 来 说 ， 最 重要 的 一 点 是 要 理解 它 的 * 实 时” (live) 性 。 由 
于 在 JavaScript 中 ， 几 乎 所 有 对 象 都 是 通过 传 引 用 的 方式 来 传递 的 ， 
此 我 们 所 创建 的 每 个 新 对 象 实体 中 并 没有 一 份 属 于 目 己 原 型 副本 。 这 
也 就 意味 着 我 们 可 以 随时 修改 prototype 属性 ， 并 且 由 同一 构造 絮 创 建 


的 所 有 对 象 的 prototype 属性 也 都 会 同时 改变 (其 至 还 会 影 啊 在 修改 之 
前 就 已 经 创建 了 的 那些 对 象 ) 

下 面 继 续 之 前 的 例子 ， 让 我 们 再 向 原型 中 添加 一 个 新 方法 : 

Gadget.prototype.get = function(what) { 

return this[whatj; 

二 

然后 您 束 会 看 到 ， 即 便 newtoy 对 象 在 get(0) 方 法 定义 之 前 就 已 经 被 
创建 了 ， 但 我 们 依然 可 以 在 该 对 象 中 访问 新 增 的 方法 : 

> newtoy.get('price'); 

100 

> newtoy.get('color'); 

"black" 


5.1.3 性 与 原型 属 ; 


在 之 前 天 于 getInfo() 的 那个 示例 中 ， 我 们 是 使 用 this 指 针 来 完成 对 
象 访问 的 ， 但 其 实 直 接 引 用 Gadget.prototype 也 可 以 完成 同样 的 操作 : 
Gadget.prototype.getInfo = function() { 


return 'Rating: ' + Gadget.prototype.rating +', price: ' + 
Gadget.prototype.price; 

}; 
这 之 间 会 有 什么 不 同 吗 ? 想 要 回答 这 个 问题 ， 我 们 束 必 须要 更 深 
入 地 理解 原型 的 工作 原理 。 

下 面 ， 让 我 们 再 回 到 之 前 的 那个 hewtoy 对 象 上 来 : 

> Var newtoy = new Gadget(webcam'，black ); 

当 我 们 访问 newtoy 的 某 个 属性 ， 例 如 newtoyname 时 ，JavaScript 引 | 
擎 会 志 历 该 对 象 的 所 有 属性 ， 并 查找 出 name 必 性。 如果 找到 了 惑 会 立 


即 返 回 其 值 。 

> newtoyname; 

"webcam" 

那么 ， 如 果 我 们 访问 rating 属性 又 会 发 生 什么 呢 ?JavaScript 引擎 
依然 会 查询 newtoy 对 象 的 所 有 属性 ， 但 这 一 回 它 找 不 到 一 个 叫 rating 的 
属性 了 。 接 下 来 ， 脚 本 引擎 就 会 去 查询 用 于 创建 当前 对 象 的 构造 絮 函 
数 的 原型 (等 价 于 我 们 直接 访问 newtoy. constructorprototype) 。 如果 
在 原型 中 找到 了 该 属性 ， 束 立即 使 用 该 属性 。 

> Dewtoy.rating; 

3 

这 种 方式 与 直接 访问 原型 属性 是 一 样 的 。 每 个 对 象 都 有 属于 上 自己 
的 构造 器 属性 ， 其 所 引用 的 瓯 是 用 于 创建 该 对 象 的 那个 函数 ， 所 以 在 
六 里 : 


> newtoy.constructor === Gadget; 


true 

> newtoy.constructor.prototype.rating; 

3 

现在 ， 让 我 们 再 仔细 回顾 一 下 整个 过 程 : 首先 我 们 知道 每 个 对 象 
都 会 有 一 个 构造 希 ， 而 原型 本 吴 也 是 一 个 对 象 ， 这 意味 着 它 必 然 也 有 
一 个 构造 右 ， 而 这 个 构造 右 义 会 有 目 己 的 原型 。 于 是 这 种 结构 可 能 会 
一 直 不 断 地 持续 下 去 ， 并 最 终 取 决 于 原型 链 ( prototype chain) 的 长 
度 ， 但 其 最 后 一 环 肯 定 是 Object 内 建 对 象 ， 因 为 它 是 最 高 级 的 父 级 对 
象 。 事 实 上 ， 如 果 您 试 着 调用 一 下 newtoy.toString() 的 话 ， 由 于 newtoy 
对 象 及 其 原型 中 都 不 存在 toString0 方 法 。 最 后 我 们 能 调用 的 也 束 只 
Object 对 象 的 toString0) 方 法 了 。 

> newtoy.toString(); 

"[object Object]" 


5.1.4 利用 性 重 写 原型 属 ; 


通过 上 面 的 讨论 ， 我 们 知道 如 果 在 一 个 对 象 目 身 属性 中 没有 找到 
指定 的 属性 ， 就 会 使 用 (如 果 存 在 的 话 ) 原型 链 中 查找 到 的 相关 的 属 
性 。 但 是 ， 如 采 遇 上 对 和 象 的 目 身 属性 与 原型 属性 同名 又 该 怎么 办 呢 ? 
答案 是 对 象 目 身 属性 的 优 移 级 高 于 原型 属性 。 

让 我 们 来 看 一 个 具体 的 示例 ， 即 同一 个 属性 名 同时 出 现在 对 象 的 
目 身 属性 和 原型 属性 中 : 


> function Gadget(name) { 


this.name = name: 

} 

> Gadget.prototype.name = 'mirror'; 

然后 我 们 新 建 一 个 对 象 ， 并 访问 该 对 象 自身 的 name 属 性 : 

> var toy = new Gadget('camera'); 

> toy.name; 

"camera" 

我 们 可 以 通过 hasOwnProperty() 方 法 来 判断 一 个 属性 是 上 自身 属性 还 
是 原型 属性 。 

> toy.hasOwnProperty('name'); 


true 


这 时 候 ， 如 果 我 们 删除 这 个 属性 ， 同 名 的 原型 属性 就 会 “ 浮 出 水 


> delete toy.name; 
true 

> toy.name; 
"mirror" 


> toy.hasOwnProperty('name'); 


false 

当然 ， 我 们 随时 都 可 以 重建 这 个 对 象 的 目 喘 属性 : 

> toy.name = ' Camera ; 

> toy.name; 

"camera" 

如 何 判断 一 个 对 象 的 某 个 原型 属性 到 上 的 是 原型 链 中 的 哪个 原型 的 
属性 呢 ? 答案 仍然 是 使 用 hasOwnPropertyO 属 性 。 例 如 ， 我 们 想 知 道 
toString 属 性 来 自 于 哪里 : 

> toy.toString(); 

"[object Object]" 

> toy.hasOwnProperty(toString ); 


false 

> toy.constructor.hasOwnProperty('toString’); 

false 

> toy.constructor.Protoype.hasOwnProperty('toString'); 

false 

> Object.hasOwnProperty(to9tring ); 

false 

> Object.prototype.hasOwnProperty(toString ); 

true 

啊 哈 ! 

枚 举 属性 

如 果 想 获得 某 个 对 象 所 有 属性 的 列表 ， 我 们 可 以 使 用 for-in 循 环 。 
在 第 2 革 : 基本 数据 类 型 、 数 组 、 循 环 及 条 件 表 达 式 中 ， 我 们 已 经 知道 
了 如 何 使 用 该 循环 来 饥 历 数组 中 的 所 有 元 素 。 当 时 我 们 提 到 ，for 更 适 
合 数组 而 for-in 更 适合 对 象 。 让 我 们 以 构造 URL 字 符 串 为 例 : 


Var params = { 


productid: 666， 
section: Products' 
}; 
var url = 'http://example.org/page.php?,, 
1, 
query = 中; 
for (i in params) { 
query.push(i + '=' + params[i]); 

} 

Url += query.join('&'); 

最 后 我 们 得 到 的 变量 ur 为: 

"http://example.org/page.php?productid=666&section=products" 

在 这 里 ， 有 些 细节 需要 留意 。 

并 不 是 所 有 的 属性 都 会 在 for-in 循环 中 显示 。 例 如 (数组 的 ) 
length 属性 和 constructor 属性 就 不 会 补 显 示 。 那 些 会 显示 的 属性 被 称 为 
是 可 枚 举 的 ， 我 们 可 以 通过 各 个 对 象 所 提供 的 propertyIsEnumerable() 
方法 来 判断 对 象 的 某 个 属性 是 否 可 枚 举 。 在 ES5 中 ， 我 们 可 以 具体 指 
定 哪些 属性 可 枚 举 ， 而 在 ES3 中 没有 这 个 功能 。 

原型 链 中 的 各 个 原型 属性 也 会 被 显示 出 来 ， 当 然 前 提 是 它们 是 可 
枚 举 的 。 我 们 可 以 通过 对 象 的 hasOwnProperty0 方 法 来 判断 一 个 属性 
是 对 象 日 身 属性 还 是 原型 属性 。 

对 于 所 有 的 原型 属性 ，propertyIsEnumerable() 都 会 返回 false， 包 括 
那些 在 for-in 循 环 中 可 枚 举 的 属性 。 

下 面 来 看 看 这 些 方法 具体 是 如 何 使 用 的 。 首 先 ， 我 们 来 定义 一 个 
简化 版 的 Gadget(): 


function Gadget(name, color) { 


this.name = name; 


this.color = color; 
this.getName = function(){ 
return this.name; 

}; 
} 
Gadget.prototype.price = 100; 
Gadget.prototype.rating = 3; 
然后 新 建 一 个 对 象 : 
Var newtoy = new Gadget(webcam'，black); 
现在 ， 如 果 对 它 执行 for-in 循 环 ， 束 会 列 出 该 对 象 中 的 所 有 属性 ， 

包括 原型 中 的 属性 : 

for (var prop in newtoy) { 


console.log(prop + ' = "+ newtoy[prop})); 


name = webcam 
color = black 
getName = function () { 


return this.name; 


} 
price = 100 
rating = 3 


如 有 果 要 对 对 象 属性 和 原型 属性 做 一 个 区 分 ， 束 需要 调用 
hasOwnProperty() 方 法 ， 我 们 可 以 先 来 斌 一下: 
> newtoy.hasOwnProperty('name'); 


true 


> newtoy.hasOwnProperty(Price ); 
false 
下 面 我 们 再 来 循环 一 次 ， 不 过 这 次 只 显示 对 象 的 目 身 属性 : 


for (var prop in newtoy) { 


让 (newtoy.hasOwnProperty(prop)) { 


console.log(prop + =' + newtoy[prop]); 


} 

结果 为 : 

name=webcam 

color=black 

getName=function () { 

return this.name; 

} 

现在 我 们 来 试 试 propertyIsEnumerable()， 该 方法 会 对 所 有 的 非 内 
建 对 象 属性 返回 true: 

> newtoy.propertyISEnumerable(name' ); 

true 

而 对 于 内 建 属性 和 方法 来 说 ， 它 们 大 部 分 都 是 不 可 枚 举 的 : 

> newtoy.propertyISEnumerable(constructor ); 

false 

另外 ， 任 何 来 和 目 原型 链 中 的 属性 也 是 不 可 枚 举 的 : 

> newtoy.propertyISEnumerable(Price ); 

false 

但 是 需要 注意 的 是 ， 如 果 propertyIsEnumerable() 的 调用 是 来 自 原 
型 链 上 的 某 个 对 象 ， 那 么 该 对 象 中 的 属性 是 可 枚 举 的 。 


> newtoy.constructor.prototype.propertyIsEnumerable('price'); 


true 


5.1.5 isPrototypeOf() 方 法 


每 个 对 象 中 都 会 有 一 个 isPrototypeOf0 方 法 ， 这 个 方法 会 告诉 我 们 
当前 对 象 是 否 是 男 一 个 对 象 的 原型 。 
让 我 们 先 来 定义 一 个 简单 的 对 象 monkey: 
var monkey= 1{ 
hair: true, 
feeds: 'bananas,, 


breathes: ‘air' 


}; 
然后 ， 我 们 再 创建 一 个 叫做 Human0) 的 构造 器 函数 ， 并 将 其 原型 
属性 设置 为 指向 monkey: 


function Human(name) { 
this.name = name: 

} 

Human.prototype = monkey:; 

现在 ， 如 果 我 们 新 建 一 个 叫做 george 的 Human 对 象 ， 并 提问 
“monkey 是 george 的 原型 吗 ? ”， 答 案 是 true。 

> var george = new ee George'); 

> monkey.isPrototypeOf(george); 

true 

需要 注意 的 是 ， 我 们 在 这 里 是 预先 知道 了 monkey 可 能 是 george 的 
原型 ， 才 提出 了 问题 “monkey 是 你 的 原型 吗 ? ”， 然后 获得 一 个 布尔 值 
作为 回应 。 那 么 ， 是 否 能 在 不 知道 某 个 对 象 原型 是 什么 的 情况 下 ， 获 


得 对 象 的 原型 呢 ? 管 案 是 ， 大 多 数 浏 览 絮 可 以 。 因 为 大 多 数 浏 唤 如 都 
实现 了 ES5 的 Object.getPrototypeOf() 方 法 。 

> Object.getPrototypeOf(george).feeds; 

"banana" 

> Object.getPrototypeOf(george) === monkey; 

true 

而 对 于 男 一 部 分 实现 了 ES5 部 分 功能 ， 却 没有 实现 getPrototypeOf() 
方法 的 浏览 器， 我 们 可 以 使 用 特殊 属性 _proto_。 


5.1.6 神秘 的 _proto_ 链接 


现在 ， 我 们 已 经 了 解 了 当 我 们 访问 一 个 在 当前 对 象 中 不 存在 的 属 
性 时 ， 相 关 的 原型 属性 就 会 被 纳入 查询 范围 。 
下 面 让 我 们 改写 一 下 那个 用 monkey 对 象 做 原型 的 Human() 对 象 构 


MW 口 日 


Ab- 
JE 下 林 “ 


> Var mmonkey = { 
feeds: bananas ， 
breathes: 'air' 
}; 
> function Human() {} 
> Human.prototype = monkey; 
这 次 我 们 来 创建 一 个 developer 对 象 ， 并 赋予 它 一 些 属 性 : 
> var developer = new Human(); 
> developer.feeds = 'pizza'; 
> developer.hacks = JavaScript '; 
接着 ， 我 们 来 访问 一 些 属 性 ， 例 如 developer 对 象 的 hacks 属 性 : 


> developer.hacks; 


"JavaScript" 

当然 ，feeds 也 一 样 可 以 在 该 对 象 中 找到 : 

> developer.feeds; 

"pizza" 

但 breathes 在 developer 对 象 自 奥 的 属性 中 是 不 存在 的 ， 所 以 束 得 去 
原型 中 查询 ， 束 好 像 其 中 有 一 个 神秘 的 链接 ， 或 者 秘密 通道 指向 了 相 
天 的 原型 对 象 。 


> developer.breathes; 


"air" 

在 现代 JavaScript 环境 中 ， 对 象 中 确实 存在 一 个 指向 相关 原型 的 
链接 ， 这 个 神秘 的 链接 被 叫做 proto “属性 (proto 这 个 词 的 两 边 各 有 
两 条 下 划 线 ) 

> developer. proto_ ”=== monkey:; 

true 

当然 ， 出 于 学 习 的 目的 来 调用 这 种 神秘 的 属性 是 无 可 厚 非 的 ， 但 
如 采 是 在 实际 的 脚本 编写 中 ， 这 并 不 是 一 个 好 主意 。 因 为 该 属性 在 
Internet Explorer 之 类 的 浏览 絮 中 是 不 存在 的 ， 因 此 脚本 束 不 能 实现 跨 
a 

男 外 需要 提示 的 是 ，__proto_ 与 prototype 并 不 是 等 价 的 。 
_proto_ 实际 上 是 某 个 实例 对 象 的 属性 ， 而 prototype 则 是 属于 构造 器 
函数 的 属性 。 


> typeof developer proto_; 


"object" 

> typeof developer.prototype; 
"undefined" 

> typeof developer.constructor.prototype; 


"object" 


千 万 要 记 住 ，_proto “只 能 在 学 习 或 调试 的 环境 下 使 用 。 或 者 如 
果 你 的 代码 碰巧 只 需要 在 符合 ES5 标 准 的 环境 中 使 用 的 话 ， 你 也 可 以 
使 用 Object.getPrototypeOfO 方 法 。 


D.2 ， 


在 JavaScript 中 ， 内 建 对 象 的 构造 絮 函 数 (例如 Array、String、 
Object 和 Function) 都 是 可 以 通过 其 原型 来 进行 扩展 的 。 这 意味 着 我 们 
可 以 做 一 些 事情 ， 例 如 只 要 往 数 组 原型 中 添加 新 的 方法 ， 就 可 以 使 其 
在 所 有 的 数组 可 用 。 下 面 ， 我 们 就 来 试 试看 。 

PHP 中 有 一 个 叫做 in_array0 的 函数 ， 主 要 用 于 碍 询 数组 中 是 否 存 
在 某 个 特定 的 值 。JavaScript 中 则 没有 一 个 叫做 让 Array0 的 方法 (不 过 
在 ES5 中 有 indexOfO 方 法 ) ， 因 此 ， 下 面 我 们 通过 Array.prototype 来 实 
现 一 个 。 

Array.prototype.inArray = function(needle) { 

for (var i = 0, len = this.length; i < len; i++) { 
if (this[i] === needle) { 
return true; 
} 
} 
return false; 

}; 
现在 ， 所 有 的 数据 对 象 都 拥有 了 一 个 新 方法 ， 我 们 来 测试 一 下 : 
> Var colors = ['red', 'green', 'blue']; 
> colors.inArray(red'); 


true 


> colors.inArray('yellow'); 
false 
这 很 简单 ! 我 们 可 以 再 做 一 次 。 假 设 我 们 的 应 用 程序 需要 一 个 反 
转 字 符 串 的 功能 ， 并 且 也 觉得 String 对 象 应 该 有 一 个 reverse() 方 法 ， 毕 
竟 Array 对 象 是 有 reverse() 方 法 的 。 其 实 ， 在 String 的 原型 中 添加 一 个 
reverse() 方 法 也 很 容易 ， 我 们 可 以 借助 于 Array.prototype. reverse() 方 法 
(这 与 第 4 章 : 对 象 中 的 某 道 练习 题 很 相似 ) 。 


String.prototype.reverse = function() { 


return Array.prototype.reverse.apply(this.split(")).join("); 

} 

在 这 上 段 代 码 中 ， 我 们 实际 上 是 先 利用 split0) 方 法 将 目标 字符 串 转 换 
成 数组 ， 然 后 再 调用 该 数组 的 reverse(0) 方 法 产生 一 个 反 辐 数组 。 最 后 
通过 join() 方 法 将 结 末 数 组 转换 为 字符 串 。 下 面 我 们 来 测试 一 下 这 个 新 
方 读 * 

> "bumblebee".reversel(); 

"eebelbmub" 

这 真是 个 好 名 字 ， 听 起 来 就 像 某 种 很 大 的 、 非 常 叶 人 的 (而且 可 
能 还 是 毛 昔 昔 的 ) 神秘 生物 ， 不 是 吗 ? 


建 对 象 的 讨论 


由 于 通过 原型 来 扩展 内 建 对 象 是 一 项 非常 强大 的 扩 术 ， 有 了 它 ， 
我 们 几乎 可 以 随心 所 欲 地 重 塑 JavaScript 语言 的 能 力 。 但 也 正 是 由 于 
它 有 如 此 强大 的 威力 ， 我 们 在 选择 使 用 这 项 能 力 时 就 必须 慎之 又 慎 。 

原因 在 于 一 旦 开发 者 熟悉 了 JavaScript， 那 么 无 论 他 在 用 哪些 第 三 
方 库 或 者 工具 ， 他 都 会 预期 JavaScript 内 建 对 象 与 方法 和 他 的 认 知 相 


同 。 一 旦 修改 了 内 建 对 象 ， 它 们 的 行为 会 发 生 改 变 ， 代 码 的 用 户 与 维 
护 者 克 会 觉得 困惑 ， 从 而 导致 无 法 预期 的 错误 。 

而 且 ，JavaScript 目 身 也 会 发 展 ， 浏 览 絮 厂商 支持 的 功能 会 越 来 越 
多 ， 没 准 我 们 今天 所 缺失 的 ， 想 通过 原型 来 扩展 的 功能 ， 明 天 就 会 出 
现在 内 建 方法 中 。 在 这 种 情况 下 ， 我 们 设计 的 方法 残 不 被 需要 了 。 必 
外 ， 假 设 我 们 已 经 编写 了 大 量 的 代码 ， 这 些 代 码 都 是 基于 基本 对 象 扩 
展 而 来 的 目 定 义 方法 ， 而 这 些 方法 后 来 又 被 浏 贤 右 三 丙 实现 为 内 建 方 
法 了 ， 但 我 们 这 些 目 定 义 方法 又 与 新 的 内 建 方法 有 些许 不 同 ， 这 个 时 
候 会 发 生 什么 呢 ? 

其 实 对 基于 相关 内 建 原型 来 增加 目 定 义 方法 这 种 技术 来 说 ， 最 常 
用 且 最 能 被 接受 的 例子 ， 是 实现 让 老式 浏览 器 支持 新 功能 ， 而 且 应 该 
是 已 被 ECMAScript 委员 会 标准 化 了 的 、 为 现代 浏览 右 所 实现 的 新 功 
能 。 例 如 让 旧版 下 支持 ES5 中 的 方法 。 我 们 通常 把 这 类 扩展 叫做 shims 
或 者 polyfills。 

另外 ， 当 您 用 目 定 义 方法 扩展 原型 时 ， 首 先 应 该 检查 该 方法 是 否 
已 经 存在 。 这 样 一 来 ， 当 浏览 颖 内 存在 同名 内 建 方法 时 ， 我 们 可 以 直 
接 调 用 原生 方法 ， 这 就 避免 了 方法 覆盖 。 在 下 面 的 例子 中 ， 我 们 将 为 
String 对 象 添 加 trim() 方 法 。 该 方法 是 ES5 标 准 的 一 部 分 ， 但 其 在 老式 浏 
唤 句 中 并 没有 得 到 支持 : 


if (typeof String.prototype.trim !=== 'function'){ 


String.prototype.trim = function () { 
return this.replace(/N\s+l\st&/g, " ); 
上 
} 
> " hello "“.trim(); 
"hello" 
最 佳 实践 


如 果 您 想 要 通过 原型 为 某 个 对 象 添 加 一 个 新 属性 ， 务 必 先 检查 一 
下 该 属性 是 否 已 经 人 存在。 


5.2.2 原型 


在 处 理 原型 问题 时 ， 我 们 需要 特别 注意 以 下 两 种 行为 。 

当 我 们 对 原型 对 象 执行 完全 替换 时 ， 可 能 会 触发 原型 链 中 某 种 异 
和 (exception) 

prototype.constructor 属性 是 不 可 靠 的 。 

下 面 ， 我 们 来 新 建 一 个 人 简单 的 构造 器 画 数 ， 并 用 它 再 创建 两 个 对 


> function Dog() { 
this.tail = true; 

l 

> Var benji = new Dog(); 

> Var rusty = new Dog(); 

即便 在 benji 和 rusty 对 象 创建 之 后 ， 我 们 也 依然 能 为 Dog0) 的 原型 添 
加 属性 ， 并 且 在 属性 被 添加 之 前 就 已 经 存在 的 对 象 也 可 以 随时 访问 这 
些 新 属性 。 现 在 ， 让 我 们 放 一 个 say0) 方 法 进去 : 

> Dog.prototype.say = function(){ 


return "Woof!'; 


i 

这 样 ， 上 面 的 两 个 对 象 都 可 以 访问 该 靳 方法 了 : 
> benji.say(); 

"Woof!" 


> rusty.say(); 
"Woof!" 


通过 


如 果 我 们 检查 一 下 这 些 对 象 构 造 器 函数 ， 束 会 发 现 一 切 正 常 。 
> benji.constructor === Dog; 

true 

> rusty.constructor === Dog; 

true 

现在 ， 我 们 用 一 个 自 定 义 的 新 对 象 完 全 和 履 盖 掉 原 有 的 原型 对 象 : 
> Dog.prototype = { 


paws: 4, 

hair: true 
; 
事实 证 明 ， 这 会 使 原 有 对 象 不 能 访问 原型 的 新 增 属性 ， 它 们 依然 
那个 神秘 的 链接 与 原 有 的 原型 对 象 保持 联系 。 


> typeof benji.paws; 


"undefined" 

> benji.say(); 

"Woof!" 

> typeof benji._ proto__.say; 
"function" 

> typeof benji._ proto__.paws; 
"undefined" 


而 我 们 之 后 创建 的 所 有 对 象 使 用 的 都 是 被 更 新 后 的 prototype 对 


> var lucy = new Dog(O; 

> lucy.say(); 

TypeError: lucy.say is not a function 
> lucy.paws; 

4 


该 是 


YTA， 一 


中 但 


并 且 ， 其 秘密 链接 proto “也 指 和 同 了 新 的 prototype 对 象 : 

> typeof lucy._ proto__.say; 

"undefined" 

> typeof lucy._ proto__.paws:; 

"number" 

但 这 时 候 ， 新 对 象 的 constructor 属 性 就 不 能 再 保持 正确 了 ， 原 本 应 
Dog0 的 引用 却 指向 了 ObjectO 。 


> lucy.constructor; 


function Object(){[native code]} 
> benji.constructor; 
function Dog(){ 
this.tail = true; 
} 
当然 ， 我 们 可 以 通过 重新 设置 constructor 属 性 来 解决 上 述 所 有 的 异 


为 : 

> function Dog() {} 

> Dog.prototype = {}; 

> new Dog().constructor === Dog; 
false 

> Dog.prototype.constructor = Dog; 
> new Dog().constructor === Dog; 
true 

最 佳 实践 


当 我 们 重 写 某 对 象 的 prototype 时 ， 需 要 重 置 相应 的 constructor 属 


5.3 小 结 


现在 ， 让 我 们 来 总 结 一 下 本 章 所 讨论 的 几 个 最 重要 的 话题 ; 

在 JavaScript 中 ， 所 有 了 碎 数 都 会 拥有 一 个 叫做 prototype 的 属性 ， 默 
认 初 始 值 为 “ 空 ”对 象 (没有 上 自身 属性 的 对 象 ) 。 

我 们 可 以 在 相关 的 原型 对 象 中 添加 新 的 方法 和 属性 ， 甚 至 可 以 用 
目 定义 对 象 来 完全 替换 掉 原 有 的 原型 对 象 。 

当 我 们 通过 某 个 构造 器 函数 来 新 建 对 象 时 (使 用 new 操作 符 ) ， 
这 些 对 象 束 会 目 动 拥有 一 个 指 问 各 自 prototype 属性 的 神秘 链接 ， 并 且 
可 以 通过 它 来 访问 相关 原型 对 象 的 属性 。 

对 象 自身 属性 的 优先 级 要 高 于 其 原型 对 象 中 的 同名 属性 。 

我 们 可 以 通过 hasOwnProperty() 方 法 来 区 分 对 象 自 和 喘 属性 和 原型 属 
性 。 

原型 链 的 存在 : 如 果 我 们 在 一 个 对 象 foo 中 访问 一 个 并 不 存在 的 
属性 bar， 即 当 我 们 访问 foo.bar 时 ，JavaScript3 引 擎 束 会 搜索 该 对 象 的 原 
型 的 bar 属 性 。 如 果 依 然 没 有 找到 bar 属性 ， 则 会 继续 搜索 其 原型 的 原 
型 ， 以 此 类 推 ， 直 到 搜索 到 Object.prototype。 

我 们 可 以 对 内 建 的 构造 右 函 数 进 行 扩展 ， 以 便 所 有 的 对 象 都 能 引 
用 我 们 添加 的 功能 。 如 果 将 某 个 函数 赋值 给 Array.prototype.flip， 所 有 
的 数组 对 象 都 能 立即 增添 一 个 fip0 方 法 ， 如 [12,3].flip0。 另 外 ， 在 添 
加 相关 的 方法 和 属性 之 前 ， 应 该 做 一 些 对 已 有 方法 的 检测 工作 ， 这 将 
会 大 大 增加 脚本 对 于 未 来 环境 的 适应 能 


5.4 练习 题 


1. 创建 一 个 名 为 shape 的 对 象 ， 并 为 该 对 象 设置 一 个 type 属 性 和 一 
个 getType() 方 法 。 

2. 定义 一 个 原型 为 shape 的 Triangle() 构 造 器 函数 ， 用 Triangle() 创 
建 的 对 象 应 该 具有 三 个 对 象 属性 一 a、b、c， 分 别 用 于 表示 三 角形 的 
三 条 边 。 

3， 在 对 象 原型 中 添加 一 个 名 为 getPerimeter0O 的 新 方 法 。 

4. 使 用 下 面 的 代码 来 测试 您 之 前 的 实现 : 


> var t= new Triangle(1, 2, 3); 


> t.constructor === Triangle; 
true 
> shape.isPrototypeOf(t); 
true 
> t.getPerimeter(); 
6 
> t.getType(); 
"triangle" 
5. 用 循环 遍历 对 象 :， 列 出 其 所 有 的 属性 和 方法 (不 包括 原型 部 
分 的 ) 
6. 实现 随机 打 乱 函数 shuffle()， 执 行 效 果 如 下 : 
> [1,2,3,4,5,6,7,8,9].shuffle(); 
[2, 4, 1, 8, 9, 6, 5, 3, 7] 


第 6 草 继承 


如 果 回 顾 一 下 我 们 在 第 1 章 : 面向 对 象 的 JavaScript 中 所 讨论 的 内 
容 ， 束 会 发 现 ， 我 们 当时 所 列 出 的 、 有 关 JavaScript 中 面向 对 和 象 程序 设 
计 的 各 项 话题 ， 现 在 几乎 都 已 经 涉及 了 。 我 们 了 解 了 对 象 、 方 法 与 属 
性 。 我 们 也 知道 了 JavaScript 中 没有 类 的 概念 ， 但 可 以 用 构造 右 函 数 来 
实现 相同 的 功能 。 有 封装 吗 ? 显然 有 ， 对 象 本 身 束 包括 数据 以 及 与 这 
些 数据 有 关 的 行为 〈 即 方法 ) 。 有 聚合 吗 ? 当然 ， 一 个 对 象 中 可 以 包 
含 其 他 对 象 ， 事 实 上 也 一 直 如 此 ， 因 为 对 象 方法 是 靠 芳 数 来 实现 的 ， 
而 函数 本 续 丈 是 对 象 。 

下 面 ， 就 让 我 们 把 焦点 转移 到 有 关 继 承 (inheritance) 的 部 分 吧 。 
毕竟 这 也 是 个 非常 重要 的 特性 ， 正 因为 有 了 它 ， 我 们 才能 实现 代码 的 
重用 ， 做 点 偷懒 的 事 ， 这 不 正 是 我 们 从 事 计 算 机 程序 设计 的 初衷 吗 ? 

JavaScript 是 一 种 动态 的 程序 设计 语言 ， 因 而 它 对 于 同一 个 任务 往 
往 会 同时 存在 几 种 不 同 的 解决 方案 。 在 继承 问题 上 也 不 例外 。 在 本 章 
中 ， 我 们 将 为 您 介绍 一 系列 常见 的 继承 模式 。 只 有 很 好 地 理解 这 些 模 
式 ， 我 们 才能 在 具体 的 工程 中 选择 正确 的 模式 或 模式 组 合 。 


6.1 原型 链 


让 我 们 和 爷 从 稚 认 的 继承 模式 开始 ， 即 通过 原型 来 实现 继承 关系 
链 。 


正如 我 们 之 前 所 了 解 的 ，JavaScript 中 的 每 个 函数 中 都 有 一 个 指 辐 
某 一 对 象 的 prototype 属 性 。 该 函数 被 new 操 作 符 调用 时 会 创建 并 返回 一 
个 对 象 ， 并 且 该 对 象 中 会 有 一 个 指向 其 原型 对 象 的 秘密 链接 。 通 过 该 
秘密 链接 〈 在 某 些 环境 中 ， 该 链接 名 为 _proto _) ， 我 们 就 可 以 在 新 
建 的 对 象 中 调用 相关 原型 对 象 的 方法 和 属性 。 

而 原型 对 象 自 身 也 具有 对 象 回 有 的 普遍 特征 ， 因 此 本 身 也 包含 了 
指 回 其 原型 的 链接 。 由 此 残 形成 了 一 条 链 ， 我 们 称 之 为 原型 链 。 

如 图 6-1 所 示 ， 在 对 象 A 的 一 系列 属性 中 ， 有 一 个 叫做 _proto_ 的 
隐藏 属性 ， 它 指 癌 了 另 一 个 对 象 B。 而 B 的 _proto “属性 又 指 册 了 对 象 
C， 以 此 类 推 ， 直 至 链条 末端 的 Object 对 象 ， 该 对 象 是 JavaScript 中 的 最 
高 级 父 对 象 ， 语 言 中 所 有 对 象 都 必须 继承 自 它 。 


图 6-1 


这 些 都 很 好 理解 ， 但 这 有 什么 实际 意义 吗 ? 显然 月 ， 正 因为 有 了 
些 技术 ， 我 们 才 可 以 在 某 个 属性 不 在 对 象 A 中 而 在 对 象 B 中 时 ， 依 然 
它 当 做 A 的 属性 来 访问 。 同 样 的 ， 如 采 对 和 象 B 中 也 没有 该 属性 ， 还 可 


这 
将 


以 继续 到 对 象 C 中 去 寻找 。 这 就 是 继承 的 作用 ， 它 能 使 每 个 对 象 都 能 访 
问 其 继承 链 上 的 任何 一 个 属性 。 

在 后 面 内 容 中 ， 我 们 将 会 演示 一 系列 不 同 的 继承 应 用 ， 这 些 示 例 
将 由 一 组 层次 分 明 的 结构 组 成 。 具 体 地 说 ， 就 是 一 组 以 通用 性 对 象 
Shape 为 父 对 象 的 二 维 图 形 对 象 序列 (包括 Triangle、Rectangle 等 ) 。 


6.1.1 原型 链 示 例 


原型 链 是 JavaScript 中 实现 继承 的 默认 方式 。 下面， 我 们 就 用 这 种 
方式 来 实现 之 前 所 描述 的 层次 结构 吧 ， 首 先 我 们 来 定义 三 个 构造 右 画 
数 : 

function ShapeO{ 

this.name = 'Shape'; 

this.toString = function() { 

return this.name; 

上 

} 

function TwoDShapeO{ 

this.name = '2D shape'; 

} 

function Triangle(side, height) { 

this.name = "Triangle'; 

this.side = side; 

this.height = height; 

this.getArea = function(){ 

return this.side * this.height / 2; 

上 


} 

接 下 来 ， 就 是 我 们 施展 继承 魔法 的 代码 了 : 

TwoDShape.prototype = new Shape(); 

Triangle.prototype = new TwoDShape(); 

明白 上 面 发 生 了 什么 吗 ? 在 这 里 ， 我 们 将 对 象 直 接 创 建 在 
TwoDShape 对 象 的 prototype 属 性 中 ， 并 没有 去 扩展 这 些 对 象 的 原 有 原 
型 。 也 就 是 说 ， 我 们 用 构造 器 Shape(0 (通过 new 操作 符 ) 另 建 了 一 个 
新 的 对 象 ， 然 后 用 它 去 履 盖 TwoDShape 构造 器 的 prototype 属性 。 
Triangle 对 象 也 一 样 ， 它 的 prototype 属性 是 由 构造 器 TwoDShape0 负 责 
重建 的 (通过 new 操作 符 ) 。 切 记 : JavaScript 是 一 种 完全 依靠 对 象 的 
语言 ， 其 中 没有 类 (class) 的 概念 。 因 此 我 们 需要 直接 用 new Shape() 
构造 一 个 实体 ， 然 后 才能 通过 该 实体 的 属性 完成 相关 的 继承 工作 ， 而 
不 能 直接 继承 Shape0 构 造 问 。 另 外 这 也 确 剑 了 在 继承 实现 之 后 ， 我 们 
对 Shape() 所 进行 的 任何 修改 、 重 写 甚至 删除 ， 都 不 会 对 TwoDShapeO 广 

影响 ， 因 为 我 们 所 继承 的 只 是 由 该 构造 器 所 建 的 一 个 实体 。 

正如 在 上 一 章 中 所 提 到 的 ， 当 我 们 对 对 象 的 prototype 属性 进行 完 
全 替换 时 〈 这 不 同 于 向 prototype 指 向 的 对 象 添 加 属性 ) ， 有 可 能 会 对 对 
象 constructor 属 性 产生 一 定 的 副作用 。 所 以 ， 在 我 们 完成 相关 的 继承 关 
系 设 定 后 ， 对 这 些 对 象 的 constructor 属性 进行 相应 的 重 置 是 一 个 非常 好 
的 习惯 。 

TwoDShape.prototype.constructor = TwoDShape; 


Triangle.prototype.constructor = Triangle; 

下 面 ， 我 们 来 测试 一 下 目前 为 止 所 实现 的 内 容 ， 先 创建 一 个 
Triangle 对 象 ， 然 后 调用 它 的 getArea() 方 法 : 

> var my = new Triangle(5, 10); 

> my.getAreal(); 

25 


尽管 my 对 象 中 并 没有 属于 自己 的 toString0 方 法 ， 但 我 们 依然 可 以 
调用 它 所 继承 的 toString0 方 法 。 请 注意 ， 虽 然 我 们 这 里 调用 的 是 一 个 
继承 方法 ， 但 this 所 指向 的 依然 是 my 对 象 。 

> my.toString(); 


"Triangle" 

下 面 ， 我 们 来 关注 一 下 JavaScript 引 擎 在 my.toStringO 被 调用 时 究竟 
做 了 哪些 事 : 

首先 ， 它 会 遍历 my 对 象 中 的 所 有 属性 ， 但 没有 找到 一 个 叫做 
toString() 的 方法 。 

接着 再 去 查看 my proto “所 指向 的 对 象 ， 该 对 象 应 该 是 在 继承 关 
系 构建 过 程 中 由 new TwoDShape() 所 创建 的 实体 。 

显然 ，JavaScript 引 擎 在 明 历 TwoDShape 实 体 的 过 程 中 依然 不 会 找 
到 toString(0) 方 法 ， 然 后 ， 它 又 会 继续 检查 该 实体 的 _proto_ 属性。 这 
时 候 ， 该 _proto_ 属性 所 指向 的 实体 是 由 new ShapeO 所 创建 的 。 

终于 ， 在 new Shape() 所 创建 的 实体 中 找到 了 toString0 方 法 。 

最 后 ， 该 方法 就 会 在 my 对 象 中 被 调用 ， 并 且 其 this 也 指向 了 my。 

如 果 我 们 同 my 对 象 询问 :“ 您 的 构造 器 函数 是 哪 一 个 ? ” 它 应 该 是 
能 够 给 出 正确 答案 的 。 因 为 我 们 在 构建 继承 关系 时 已 经 对 相关 的 
constructor 属 性 进行 了 重 置 。 


> my.constructor === Triangle; 


true 

通过 instanceof 操 作 符 ， 我 们 可 以 验证 my 对 象 同 时 是 上 述 三 个 构造 
妖 的 实例 : 

> my instanceof Shape; 

true 

> my instanceof TwoDShape; 


true 


> my instanceof Triangle; 

true 

> my instanceof Array; 

false 

同样 的 ， 当 我 们 以 my 参数 调用 这 些 构造 器 原型 的 isPropertypeOfO 
方法 时 ， 结 果 也 是 如 此 : 

> Shape.prototype.isPrototypeOf(my); 

true 

> TwoDShape.prototype.isPrototypeOf(my); 

true 

> Triangle.prototype.isPrototypeOf(my); 

true 

> String.prototype.isPrototypeOf(my); 

false 

我 们 也 可 以 用 其 他 两 个 构造 器 来 创建 对 象 ， 用 new TwoDShape0 所 

创建 的 对 象 也 可 以 获得 继承 自 ShapeO 的 toString0 方 法 。 

> var td = new TwoDShape(); 

> td.constructor === TwoDShape; 

true 

> td.toString(); 

"2D shape" 

> var s = new Shape(); 

> s.constructor === Shape; 


true 


6.1.2 将 共享 属性 迁移 到 原型 中 去 


当 我 们 用 某 一 个 构造 器 创建 对 象 时 ， 其 属性 就 会 被 添加 到 this 中 
去 。 并 且 当 被 添加 的 属性 实际 上 不 会 随 着 实体 改变 时 ， 这 种 做 法 会 显 
得 很 没有 效率 。 壁 如 在 上 面 的 示例 中 ， Shape() 构 造 器 是 这 样 定义 的 : 

function Shape(){ 


this.name = 'Shape'; 

} 

这 种 实现 意味 着 我 们 用 new Shape() 创 建 的 每 个 实体 都 会 拥有 一 个 
全 新 的 name 属性 ， 并 在 内 存 中 拥有 自己 独立 的 存储 空间 。 而 事实 上 ， 
我 们 也 可 以 选择 将 name 属性 添加 到 原型 上 去 ， 这 样 一 来 所 有 实体 殉 可 
以 共享 这 个 属性 了 : 

function Shape() {} 


Shape.prototype.name = 'Shape'; 

这 样 一 来 ， 当 我 们 再 用 new Shape() 新 建 对 象 时 ，name 属性 就 不 再 
是 新 对 象 的 私有 属性 了 ， 而 是 被 添加 进 了 该 对 象 的 原型 中 。 虽 然 这 样 
做 通常 会 更 有 效率 ， 但 这 也 只 是 针对 对 和 象 实体 中 的 不 可 变 属性 而 言 
的 ， 对象 的 共有 方法 尤其 适合 这 种 共享 形式 。 

现在 ， 证 我 们 来 改善 一 下 之 前 的 示例 ， 将 其 所 有 的 方法 和 那些 符 
合 条 件 的 属性 添加 到 原型 对 象 中 去 ， 就 Shape0 和 TwoDShape0 而 言 ， 几 
乎 所 有 东西 都 是 可 以 共享 的 : 

// constructor 


function Shape() {} 


// augment prototype 
Shape.prototype.name = 'Shape,; 
Shape.prototype.toString = function() { 
return this.name; 

}; 


// another constructor 


function TwoDShapeO{} 

// take care of inheritance 

TwoDShape.prototype = new Shape(); 

TwoDShape.prototype.constructor = TwoDShape; 

// augment prototype 

TwoDShape.prototype.name = '2D shape'; 

如 您 所 见 ， 我 们 通常 会 在 对 原型 对 象 进行 扩展 之 前 ， 先 完成 相关 
的 继承 关系 构建 ， 否 则 TwoDShape.prototype 中 的 后 续 新 内 容 有 可 能 会 
抹 掉 我 们 所 继承 来 的 东西 。 

而 Triangle 构造 絮 的 情况 稍 许 有 些 不 同 ， 因 为 由 new Triangle0) 所 
创建 的 各 个 对 象 所 表示 的 三 角形 在 尺寸 上 各 不 相同 。 因 此 ， 该 对 象 的 
side 和 height 这 两 个 属性 必须 保持 目 喘 所 有 ， 而 其 他 属性 则 可 以 设置 共 
享 。 例 如 ， 方 法 getArea0 的 计算 方式 并 不 会 随 着 每 个 Triangle 实 例 而 改 
变 。 另 外 ， 需 要 再 强调 一 次 ， 我 们 必须 在 扩展 原型 对 象 之 前 完成 继承 
关系 的 构建 。 


function Triangle(side, height) { 


this.side = Side; 
this.height = height; 
} 
// take care of inheritance 
Triangle.prototype = new TwoDShape(); 
Triangle.prototype.constructor = Triangle; 
// augment prototype 
Triangle.prototype.name = "Triangle'; 
Triangle.prototype.getArea = function(){ 
return this.side * this.height / 2; 
}» 


修改 完成 之 后 ， 之 前 所 有 的 测试 代码 都 可 以 同样 的 方式 应 用 于 当 


前 版 本 ， 例 如 : 


> var my = new Triangle(5, 10); 
> my.getAreal(); 

25 

> my.toString(); 

"Triangle" 


如 您 所 见 ， 实 际 上 调用 mytoString0 的 区 别 仅 仅 存在 于 幕后 的 某 些 


少量 操作 。 主 要 区 别 也 区 是 方法 的 查找 操作 将 更 多 地 发 生 在 
Shape.prototype 中 ， 而 不 再 需要 像 前 面 示例 中 那样 ， 到 由 new Shape() 所 
创建 的 实体 对 象 中 查找 了 。 


另外， 我 们 也 可 以 通过 hasOwnProperty0 方 法 来 明确 对 象 自身 属性 


与 其 原型 链 属性 的 区 别 。 


> my.hasOwnProperty('side'); 
true 
> my.hasOwnProperty(name'); 


false 


而 调用 isPrototypeOfO 方 法 和 instanceof 操 作 符 的 工作 方式 与 之 前 并 


无 区 别 ， 例 如 : 


> TwoDShape.prototype.isPrototypeOf(my); 
true 
> my instanceof Shape; 


true 


6.2 只 继承 于 原型 


正如 上 面 所 说 ， 出 于 效率 考虑 ， 我 们 应 该 尽 可 能 地 将 一 些 可 重用 
的 属性 和 方法 添加 到 原型 中 去 。 如 果 形 成 了 这 样 一 个 好 习惯 ， 我 们 仅 
仅 依 靠 原型 就 能 完成 继承 关系 的 构建 了 。 由 于 原型 中 的 所 有 代码 都 是 
可 重用 的 ， 这 意味 着 继承 自 Shape.prototype 比 继承 自 new Shape0O 所 创建 
的 实体 要 好 得 多 。 毕 葛 ，new Shape() 方 式 会 将 Shape 的 属性 设 定 为 对 象 
自身 属性 ， 这 样 的 代码 是 不 可 重用 的 (因而 要 将 其 设置 在 原型 中 ) ， 
但 我 们 可 采取 以 下 方式 对 效率 做 一 些 改善 : 

不 要 单独 为 继承 关系 创建 新 对 象 。 

尽量 减少 运行 时 方法 搜索 (例如 toString0) 

下 面 就 是 更 改 后 的 代码 ， 我 们 用 加 粗 显 示 被 修改 的 部 分 : 

function Shape(){} 


// augment prototype 
Shape.prototype.name = 'shape'; 
Shape.prototype.toString = function() { 
return this.name; 
}; 
function TwoDShape() {} 
// take care of inheritance 
TwoDShape.prototype = Shape.prototype; 
TwoDShape.prototype.constructor = TwoDShape; 
// augment prototype 
TwoDShape.prototype.name = '2D shape '; 
function Triangle(side, height) { 
this.side = side; 
this.height = height; 
} 


// take care of inheritance 


人 


Triangle.prototype = TwoDShape.prototype; 

Triangle.prototype.constructor = Triangle; 

// augment prototype 

Triangle.prototype.name = "Triangle'; 

Triangle.prototype.getArea = function(){ 
return this.side * this.height / 2; 

} 

测试 结果 依然 相同 : 

> var my = new Triangle(5, 10); 

> my.getAreal(); 

25 

> my.toString(); 


"Triangle" 


但 是 ， 这 样 做 会 令 my.toString() 方 法 的 查找 有 什么 不 同 吗 ? 首先 ， 


JavaScript 引 警 同 样 会 先 查 看 my 对 象 中 有 没有 toString0 方 法 。 自 然 ， 

是 就 会 转 而 去 搜索 该 对 象 的 原型 属性 。 此 时 该 原型 已 
经 指 问 了 TwoDShape 的 原型 ， 而 后 者 指 癌 的 又 是 Shape.prototype。 更 重 
要 的 是 ， 由 于 这 里 所 采用 的 都 是 引用 传递 而 不 是 值 传递 ， 所 以 这 里 的 


方法 查询 步骤 由 (之 前 示例 中 的 ) 四 步 或 (本章 首 例 中 的 ) 三 步 直接 


这 样 简单 地 拷贝 原型 从 效率 上 来 说 固然 会 更 好 一 些 ， 但 也 有 它 的 


副作用 。 由 于 子 对 象 与 父 对 象 指向 的 是 同一 个 对 象 ， 所 以 一 旦 子 对 和 象 


对 其 原型 进行 了 修改 ， 父 对 象 也 会 随即 被 改变 ， 


也 部 是 如 此 。 


例如 下 面 这 行 代码 : 


Triangle.prototype.name = "Iriangle,; 


甚至 所 有 的 继承 关系 


它 对 name 属 性 进行 了 修改 ， 于 是 Shape.prototype.name 也 随 之 被 改 
变 了 。 也 就 是 说 ， 当 我 们 再 用 new Shape0 新 建 对 象 时 ， 新 对 象 的 name 
属性 也 会 是 Triangle: 

> var s = new Shape(); 

> S.name; 

"Triangle" 


因而 ， 这 种 方法 虽然 效率 更 高 ， 但 在 很 多 应 用 场景 中 并 不 适合 使 


临时 构造 事 一 newFO0 

正如 上 面 所 说 ， 如 果 所 有 prototype 属性 都 指向 了 一 个 相同 的 对 
象 ， 父 对 象 就 会 受到 子 对 象 属性 的 影响 。 要 解决 这 个 问题 ， 就 必须 利 
用 某 种 中 介 来 打破 这 种 连锁 关系。 我 们 可 以 用 一 个 临时 构造 如 函数 来 
充当 中 介 。 即 我 们 创建 一 个 空 函 数 FO， 并 将 其 原型 设置 为 父 级 构造 
器 。 然 后， 我们 既 可 以 用 new FO 来 创建 一 些 不 包含 父 对 象 属性 的 对 
象 ， 同 时 又 可 以 从 父 对 象 prototype 属 性 中 继承 一 切 了 。 

下 面 是 修改 之 后 的 代码 : 

function Shape(){} 

// augment prototype 

Shape.prototype.name = 'Shape'; 

Shape.prototype.toString = function() { 

return this.name; 

’ 

function TwoDShape() {} 

// take care of inheritance 

var F = function() {}:; 

F.prototype = Shape.prototype; 

TwoDShape.prototype = new F(); 


TwoDShape.prototype.constructor = TwoDShape; 
// augment prototype 
TwoDShape.prototype.name = '2D shape '; 
function Triangle(side, height) { 
this.side = side; 
this.height = height; 
} 
// take care of inheritance 
var F = function(){}; 
F.prototype = TwoDShape.prototype; 
Triangle.prototype = new F(); 
Triangle.prototype.constructor = Triangle; 
// augment prototype 
Triangle.prototype.name = 'Iriangjle'; 
Triangle.prototype.getArea = function(){ 
return this.side * this.height / 2; 
}; 
下 面 ， 我 们 来 创建 一 个 triangle 对 象 ， 并 测试 其 方法 : 
> var my = new Triangle(5, 10); 
> my.getAreal(); 
25 
> my.toString(); 
"Triangle" 
通过 这 种 方法 ， 我 们 就 可 以 保持 住 原型 链 : 
>my._ proto _ === Triangle.prototype; 
true 


> my._proto__.constructor === Triangle; 


true 


>ImY_ proto . proto === TwoDShape.prototype; 

true 

>my._ proto . proto . proto_ .constructor === 9hape; 
true 


并 且 父 对 象 的 属性 不 会 补 子 对 象 所 履 盖 : 

> var s = new Shape(); 

> S.name; 

"Shape" 

>"Iama"+new TwoDShape(); // calling toString() 

"I am a 2D shape" 

与 此 同时 ， 该 方法 也 对 一 种 意见 提供 了 支持 :将 所 有 要 共享 的 属 
性 与 方法 添加 到 原型 中 ， 然 后 只 围绕 原型 构建 继承 关系 。 也 就 是 说 ， 
这 种 主张 不 鼓励 将 对 象 的 自身 属性 纳入 继承 关系 ， 因 为 自身 属性 往往 
随 对 象 的 不 同 而 差别 其 大， 无 法 重用 。 


6.3 uber 一 子 对 象 访问 父 对 和 象 的 方 于 


在 传统 的 面向 对 象 语言 中 ， 通 常 都 会 提供 一 种 用 于 子 类 访问 父 类 
(有 时 也 叫 超 类 ) 的 特殊 语法 ， 因 为 我 们 在 实现 子 类 方法 往往 需要 其 
父 类 方法 的 额外 辅助 。 在 这 种 情况 下 ， 子 类 通 第 束 要 去 调用 父 类 中 的 
同名 方法 ， 以 便 最 终 完成 工作 。 

JavaScript 中 虽然 没有 这 种 特殊 语法 ， 但 是 要 实现 类 似 的 功能 还 是 
很 寻常 的 。 接 下 来 ， 让 我 们 再 对 之 前 的 示例 做 一 些 修 改 ， 在 构建 继承 
天 系 的 过 程 中 引入 一 个 uber 属性 ， 并 令 其 指 同 其 父 级 原型 对 象 : 

function Shape(){} 


// augment prototype 
Shape.prototype.name = 'Shape'; 
Shape.prototype.toString = function(){ 
var const = this.constructor; 
return const.uber 
? this.const.uber.toString() + ', ' + this.name 
: this.name; 
}; 
function TwoDShape(O{} 
// take care of inheritance 
var F = function(){}; 
F.prototype = Shape.prototype; 
TwoDShape.prototype = new F(); 
TwoDShape.prototype.constructor = TwoDShape; 
TwoDShape.uber = Shape.prototype; 
// augment prototype 
TwoDShape.prototype.name = '2D shape '; 
function Triangle(side, height) { 
this.side = Side; 
this.height = height; 
} 
// take care of inheritance 
var F = function(){}; 
F.prototype = TwoDShape.prototype; 
Triangle.prototype = new F(); 
Triangle.prototype.constructor = Triangle; 


Triangle.uber = TwoDShape.prototype; 


// augment prototype 

Triangle.prototype.name = "Triangle'; 

Triangle.prototype.getArea = function(){ 

return this.side * this.height / 2; 

}; 

在 这 里 ， 我 们 主要 新 增 了 以 下 内 容 : 

将 uber 属 性 设置 成 指 同 其 父 级 原型 的 引用 。 

对 toString() 方 法 进行 了 更 新 。 

在 此 之 前 ，toStringO0 所 做 的 仅仅 是 返 回 this.name 的 内 容 而 已 。 现 
在 我 们 为 它 新 增 了 一 项 额外 任务 ， 即 检查 对 象 中 是 否 存 在 
this.constructor.uber 属 性 ， 如 果 存 在 ， 就 完 调用 该 属性 的 toString 方 法 。 
由 于 this.constructor 本 里 是 一 个 范 数 ， 而 this.constructor.uber 则 是 指 癌 当 
前 对 象 父 级 原型 的 引用 ， 所 以 当 我 们 调用 Triangle 实 体 的 toString0) 方 法 
时 ， 其 原型 链 上 所 有 的 toString(O) 都 会 被 调用 : 


> var my = new Triangle(5, 10); 


> my.toString(); 

"shape, 2D shape, Triangle" 

另外 ，uber 属 性 的 名 字 原 本 应 该 是 “superclass”， 但 这 样 一 来 好 像 显 
得 JavaScript 中 有 了 类 的 概念 ， 或 许 应 该 叫做 “super”〈 就 像 Java 那 
样 ) ， 但 super 一 词 在 JavaScript 中 属于 保留 字 。 因 而 ，Douglass 
Crockford 建议 采用 德语 中 与 “super”* 同 义 的 词 “iiber”"， 这 个 主意 看 起 来 
不 错 ， 挺 酪 的 。 


6.4 将 继承 部 分 封闭 成 图 数 


下 面 ， 我 们 要 将 这 些 实现 继承 关系 的 代码 提炼 出 来 ， 并 迁 入 一 


叫做 extend0O) 的 可 重用 函数 中 : 

function extend(Child, Parent) { 
var F = function(){}; 
F.prototype = Parent.prototype; 
Child.prototype = new F(); 
Child.prototype.constructor = Child; 
Child.uber = Parent.prototype; 

} 

ee 了 再 定义 一 个 ) 


式 让 我 们 能 通过 以 下 

extend(TwoDShape, Shape); 

以 及 : 

extend(Triangle, TwoDShape); 

下 面 我 们 来 看 一 个 完整 的 例子 : 

// inheritance helper 

function extend(Child, Parent) { 
var F = function () {}:; 
F.prototype = Parent.prototype; 
Child.prototype = new F(); 
Child.prototype.constructor = Child; 
Child.uber = Parent.prototype; 

上 

// define -> augment 

function Shapel() {}; 

Shape.prototype.name = 'Shape,; 


， 我 们 既 可 
以 使 代码 保持 简洁 ， 叉 能 将 其 重用 在 构建 继承 关系 的 任务 中 。 


这 种 方 


Shape.prototype.toString = function () { 
return this.constructor.uber 
? this.constructor.uber.toString() + ', ' + this.name 
: this.name; 
}; 
// define -> inherit -> augment 
function TwoDShape( {}; 
extend(TwoDShape, Shape); 
TwoDShape.prototype.name = '2D shape '; 
// define 
function Triangle(side, height) { 
this.side = Side; 
this.height = height; 
} 
// inherit 
extend(Triangle, TwoDShape); 
// augment 
Triangle.prototype.name = "Triangle'; 
Triangle.prototype.getArea = function () { 
return this.side * this.height / 2; 
}; 
测试 : 
> new Triangle().toString(); 
"Shape, 2D shape, Triangle" 


606.5 属 ' 


接 下 来 ， 让 我 们 尝试 一 个 与 之 前 略 有 不 同 的 方法 。 在 构建 可 重用 
的 继承 代码 上 时， 我 们 也 可 以 简单 地 将 父 对 象 的 属性 拷贝 给 子 对 象 ， 参 
照 之 前 的 extend0 接 口 ， 我 们 可 以 创建 一 个 extend20 函 数 ， 该 函数 也 接 
受 两 个 构造 大 函数 为 参数 ， 并 将 Parent 的 原型 的 所 有 属性 全 部 拷贝 给 
Child 的 原型 ， 其 中 包括 方法 ， 因 为 方法 本 寻 也 是 一 种 函数 类 型 鸭 属 
性 。 
function extend2(Child, Parent) { 
varp = Parent.prototype; 
var c¢ = Child.prototype; 
for (vari in p) { 
cli] = plij; 
} 
c.uber = p; 
} 
如 您 所 见 ， 我 们 通过 一 个 简单 的 循环 侦 历 了 了 范 数 所 接受 的 所 有 属 
性 。 在 之 前 的 示例 中 ， 如 果子 对 象 需要 访问 父 对 象 的 方法 ， 我 们 可 以 
通过 设置 uber 属性 来 实现 。 而 这 里 的 情况 与 之 前 有 所 不 同 ， 由 于 我 们 
已 经 完成 对 Child 的 原型 进行 扩展 ， 不 需要 再 去 重 置 Child. 
prototype.constructor 属性 ， 因 为 它 不 会 再 个 完全 徐 盖 了 ， 因 此 在 这 里 ， 
constructor 属 性 所 指向 的 值 是 正确 的 。 
与 之 前 的 方法 相 比 ， 这 个 方法 在 效率 上 略 逊 一筹 。 因 为 这 里 执行 
的 是 子 对 象 原型 的 逐一 拷贝 ， 而 非 简单 的 原型 链 查 询 。 所 以 我 们 必须 
要 记 住 ， 这 种 方式 仅 适 用 于 只 包含 基本 数据 类 型 的 对 象 ， 所 有 的 对 象 
类 型 (包括 函数 与 数组 ) 都 是 不 可 复制 的 ， 因 为 它们 只 文 持 引用 传 
递 o 
下 面 我 们 来 看 看 具体 的 应 用 示例 ， 以 下 有 两 个 构造 硕 函 数 Shape() 
和 TwoDShape0。 其 中 ，Shape0 的 原型 中 包含 了 一 个 基本 类 型 属性 


name， 和 一 个 非 基 本 类 型 属性 


var Shape = function(O){}; 


toString() 方 法 : 


var TwoDShape = function(){}; 

Shape.prototype.name = 'Shape'; 

Shape.prototype.toString = function(){ 

return this.uber 
? this.uber.toString() + '", ' + this.name 
: this.name; 

由 

如 果 我 们 通过 extend0) 方 法 来 实现 继承 ， 那 么 name 属 性 既 不 会 是 
TwoDShape() 实 例 的 属性 ， 也 不 会 成 为 其 原型 对 象 的 属性 ， 但 是 子 对 象 
依然 可 以 通过 继承 方式 来 访问 该 属性 。 

> extend(TwoDShape, Shape); 

> var td = new TwoDShape(); 

> td.name:; 

"shape" 

> TwoDShape.prototype.name; 

"shape" 

> td. proto_ .name; 

"shape" 

> td.hasOwnProperty(name'); 

false 

>td._proto_ .hasOwnProperty('name'); 

false 

而 如 果 继 承 是 通过 extend20 方 法 来 实现 的 ，TwoDShape0 的 原型 中 
束 会 搁 贝 获得 属于 目 己 的 name 必 性。 同样 的 ， 其 中 也 会 拷贝 属于 目 己 


的 toString() 方 法 ， 但 这 只 是 一 个 范 数 引用 ， 函 数 本 号 并 没有 被 再 次 创 
建 。 

> extend2(TwoDShape, Shape); 

> var td = new TwoDShape(); 

>td._proto_ .hasOwnProperty('name'); 

true 

>td._proto_ .hasOwnProperty('toString'); 

true 

>td._ proto_ .toString === Shape.prototype.toString; 

true 

如 您 所 见 ， 上 面 两 个 toString0 方 法 实际 是 同一 个 函数 对 象 。 之 所 
以 这 样 做 ， 也 是 因为 这 样 的 方法 重建 其 实 是 完全 没有 必要 的 。 

所 以 ， 之 所 以 说 extend20) 方 法 的 效率 要 低 于 extend0 方 法 ， 主 要 是 
前 者 对 部 分 原型 属性 进行 了 重建 。 当 然 了 ， 这 对 于 只 包含 基本 数据 类 
型 的 对 象 来 说 ， 未 必 真 的 惑 如 此 糟糕 。 而 且 ， 这 样 做 还 能 使 属性 碍 找 
操作 更 多 地 停留 在 对 象 本 号 ， 从 而 可 减少 原型 链 上 的 查找 。 

现在 ， 让 我 们 再 来 回顾 一 下 定义 uber 属性 的 整个 过 程 。 这 一 次 的 
做 法 有 别 于 之 前 的 通过 Parent 构 造 如 赋值 ， 这 里 我 们 是 将 Parent 的 
prototype 属 性 赋值 给 了 变量 p， 再 通过 p 来 完成 uber 赋 值 的 。 之 所 以 要 故 
意 做 出 这 种 差异 化 实现 只 是 为 了 说 明 ， 您 可 以 根据 自己 的 需要 来 使 用 
您 目 己 认为 合适 的 继承 模式 。 让 我 们 来 测试 一 下 代码 : 

> td.toString(); 


"Shape, Shape" 

TwoDShape 并 没有 重新 定义 name 属 性 ， 所 以 在 这 里 打印 了 两 个 
Shape。 您 可 以 在 任何 时 候 重新 定义 name 属 性 ， 然 后 所 有 的 实例 都 会 立 
即 “看 见 ”name 属 性 的 更 新 : 

> TwoDShape.prototype.name = "2D shape ; 


> td.toString(); 
"Shape, 2D shape" 


6.6 请 小 心 处 理 


事实 上 ， 对 象 类 型 (包括 函数 与 数组 ) 通常 都 是 以 引用 形式 来 进 
行 捞 贝 的 ， 这 有 时 会 导致 一 些 与 预期 不 同 的 结 采 。 

下 面 ， 我 们 来 创建 两 个 构造 器 函数 ， 并 在 第 一 个 构造 器 的 原型 中 
添加 一 些 属性 : 

> function Papa() {} 

> function Wee() {} 

> Papa.prototype.name = Bear ; 

> Papa.prototype.owns = ["porridge", "chair", "bed"]; 

现在 ， 我 们 让 Wee 继 承 Papa (通过 extend() 或 extend2() 来 实现 ) : 

> extend2(Wee, Papa); 

这 里 使 用 的 是 extend2()， 即 Wee 的 原型 继承 了 Papa 的 原型 属性 ， 
并 将 其 变 成 了 目 身 属性 。 

> Wee.prototype.hasOwnProperty(mame ); 

true 

> Wee.prototype.hasOwnProperty('owns'); 

true 

其 中 ，name 属 于 基本 类 型 属性 ， 创 建 的 是 一 份 全 新 的 拷贝 。 而 
owns 属 性 息 一 个 数组 对 象 ， 它 所 执行 的 是 引用 拷贝 : 

> Wee.prototype.owns; 

["porridge", "chair", "bed"] 


> Wee.prototype.owns === Papa.prototype.owns; 


true 
如 果 改 变 Wee 中 的 name 属 性 ， 不 会 对 Papa 产 生 影 啊 : 
> Wee.prototype.name += ,Little Bear'; 


"Bear, Little Bear" 


> Papa.prototype.name; 

"Bear" 

但 如 果 改 变 的 是 Wee 的 owns 必 性，Papa 束 会 受到 影响 了 ， 因 为 这 两 
个 属性 在 内 存 中 引用 的 是 同一 个 数组 : 

> Wee.prototype.owns.popO); 

"bed" 


> Papa.prototype.owns; 


["porridge", "chair"] 

当然 ， 如 果 我 们 用 另 一 个 对 象 对 Wee 的 owns 属 性 进行 完全 重 写 (而 
不 是 修改 现 有 属性 ) ， 事 情 就 完全 不 一 样 了 。 在 这 种 情况 下 ，Papa 的 
owns 属 性 会 继续 引用 原 有 对 象 ， 而 wee 的 owns 属 性 则 指向 了 新 的 对 
象 。 

> Wee.prototype.owns = ["empty bow!]", "broken chair"]; 

> Papa.prototype.owns.push('bed'); 

> Papa.prototype.owns; 

["porridge", "chair", "bed"] 

这 里 的 主要 思想 是 ， 当 某 些 东西 被 创建 为 一 个 对 象 时 ， 它 们 惑 被 
存储 在 内 存 中 的 某 个 物理 位 置 ， 相 关 的 变量 和 属性 就 会 指 同 这 些 位 
置 。 而 当 我 们 将 一 个 新 对 象 赋值 给 Wee.prototype.owns 时 ， 就 相当 于 告 
诉 它 :“ 喂 ， 起 了 那个 旧 对 象 吧 ， 快 将 指针 转移 到 现在 这 个 新 对 象 上 
来 ”。 

下 面 ， 我 们 可 以 通过 图 6-2 来 了 解 一 下 内 存 中 对 象 的 储存 情况 。 内 
存 中 所 存储 的 对 象 通常 会 整齐 排列 ， 看 上 去 就 像 一 面 用 砖头 堆 起 来 的 


悍 。 而 我 们 的 变量 则 是 一 些 指向 这 些 对 象 的 指针 。 该 图 中 展示 出 了 以 
下 几 种 情况 : 

令 创建 一 个 新 对 象 ， 并 有 旦 让 变量 A 指 同 该 对 象 。 

多 创建 一 个 新 变量 B， 并 设置 其 与 A 相 等 。 也 就 是 说 ， 现 在 B 和 A 指 
癌 了 同一 个 对 象 ， 也 就 是 内 存 中 的 同一 个 位 置 。 

令 修改 变量 B 所 指 对 象 的 color 属 性 ， 将 它 设 置 为 "white"。 在 图 中 ， 
对 应 的 砖 葡 形象 地 变 为 了 日 色 。 如 有 果 现 在 我 们 执行 检查 A.color === 
"white"， 残 会 得 到 true。 

令 再 创建 一 个 新 对 象 ， 然 后 让 变量 B 指 向 这 个 新 对 象 。 这 样 一 来 ， 
由 于 A 和 B 指 向 了 内 存 中 的 不 同位 置 ， 所 以 它们 之 间 已 经 完全 没有 联 
系 ， 对 它们 之 中 任何 一 个 所 做 的 更 改 都 不 会 影响 男 一 个 。 


B .code= white ; 


图 6-2 
如 果 您 想 解 决 引用 拷贝 方法 无 法 解决 的 问题 ， 那 么 也 许 应 该 考虑 
深度 拷贝 方法 。 对 此 我 们 将 在 以 后 进行 讨论 。 


6.7 对 象 之 间 的 继承 


到 目前 为 止 ， 本 章 所 有 的 示例 都 是 以 构造 器 创建 对 象 为 前 提 的 ， 
并 且 ， 我 们 在 这 些 用 于 创建 对 象 的 构造 器 中 引入 了 从 其 他 构造 器 中 继 
承 而 来 的 属性 。 但 实际 上 ， 我 们 也 可 以 丢 开 构造 血 ， 直 接 通 过 对 和 象 标 
识 法 来 创建 对 象 ， 并 且 这 样 做 还 能 减少 我 们 的 实际 输入 。 但 是 ， 它 们 
是 如 何 实现 继承 的 呢 ? 

在 Java 或 PHP 中 ， 我 们 是 通过 类 定义 来 构建 不 同类 之 间 的 继承 关系 
的 。 所 谓 传统 意义 上 的 面向 对 象 是 依靠 类 来 完成 的 。 但 JavaScript 中 没 
有 类 的 概念 ， 因 此 ， 那 些 具 有 传统 编程 背景 的 程序 员 自 然而 然 地 会 将 
构造 器 钞 数 当 做 类 ， 因 为 两 者 在 使 用 方式 上 是 最 为 接近 的 。 此 外 ， 
JavaScript 中 也 提供 了 new 操 作 符 ， 这 使 得 JavaScript 与 Java 的 相似 程度 更 
为 接近 。 无 论 如 何 ， 所 有 的 一 切 最 终 都 要 回 到 对 象 层 面 上 来 。 例 如 在 
本 章 的 第 一 个 示例 中 ， 我 们 使 用 的 语法 是 这 样 的 : 

Child.prototype = new Parent(); 

尽管 这 里 的 Child 构 造 器 (您 也 可 以 将 其 视 为 类 ) 是 从 Parent 继 承 而 
来 的 ， 但 对 象 本 身 则 是 通过 new Parent0) 调 用 来 创建 的 。 这 就 是 为 什么 
我 们 说 这 是 一 种 仿 传 统 的 继承 模式 ， 它 尽管 很 像 传 统 继承 ， 但 终究 不 
是 (因为 这 里 不 存在 任何 类 的 调用 ) 。 

那么 ， 我 们 为 什么 不 能 拿 掉 这 个 中 间 人 ( 即 构 造句 /类 ) ， 直 接 在 
对 象 之 间 构 建 继 承 关 系 呢 ? 在 extend20) 方 法 中 ， 父 原型 对 象 的 属性 被 
逐一 拷贝 给 了 子 原型 对 象 ， 而 这 两 个 原型 本 质 上 也 都 是 对 象 。 接 下 


来 ， 让 我 们 将 原型 和 构造 器 筷 了 ， 兴 试 在 对 象 之 间 进 行 直接 属性 捞 贝 
吧 。 

首先 ， 我 们 用 var o = 们 语句 创建 一 个 没有 任何 私有 属性 的 “ 空 ” 对 象 
作为 “画板 ”， 然 后 再 逐步 为 其 添加 属性 。 但 这 次 我 们 不 通过 this 来 实 
现 ， 而 是 直接 将 现 有 对 象 的 属性 全 部 拷贝 过 来 。 例 如 在 下 面 的 实现 
中 ， 男 数 将 接受 一 个 对 象 并 返回 它 的 副本 。 

function extendCopy(p) { 


var c= {}; 
for (vari in p) { 
cli] = plij; 
} 
c.uber = p; 
return C; 
} 
单纯 的 属性 全 拷贝 是 一 种 非常 简单 直接 的 模式 ， 但 适用 范围 很 
广 。 下 面 来 看 看 extendCopy0 的 实际 应 有 用。 首先， 我 们 需要 一 个 基本 对 


Var Shape = { 
name: 'Shape, 
toString: function() { 
return this.name; 
} 
上 
接着 我 们 就 可 以 根据 这 个 旧 对 象 来 创建 一 个 新 的 对 象 了 ， 只 需 调 
用 extendCopy0 国 数 ， 该 函数 会 返回 一 个 新 对 象 。 然 后 ， 我 们 可 以 继续 
对 这 个 新 对 象 进 行 扩展 ， 添 加 额外 的 功能 。 


var twoDee = extendCopy(shape); 


twoDee.name = '2D shape '; 
twoDee.toString = function(){ 
return this.uber.toString() + ', ' + this.name; 

}; 

下 面 ， 我 们 让 triangle 对 象 继承 一 个 2D 图 形 对 象 : 

var triangle = extendCopy(twoDee); 

triangle.name = "Triangle'; 

triangle.getArea = function(){ 

return this.side * this.height / 2; 

}; 

使 用 该 triangle: 

> triangle.side = 5; 

> triangle.height = 10; 

> triangle.getAreal(); 

25 

> triangle.toString(); 

"shape, 2D shape, Triangle" 

对 于 这 种 方法 而 言 ， 可 能 的 问题 就 在 于 初始 化 一 个 新 triangle 对 象 
的 过 程 过 于 演 琐 。 因 为 我 们 必须 要 对 该 对 象 的 side 和 height 值 进行 手动 
设置 ， 这 与 之 前 直接 将 相关 的 值 作 为 参数 传递 给 构造 名 函数 是 不 一 样 
的 。 但 这 方面 的 问题 只 需要 调用 一 个 函数 融 能 轻易 解决 ， 例 如 与 构造 
器 函数 类 似 的 init0 方 法 《如 果 您 使 用 PHP5 ， 可 调用 _construct0) 函 
数 ) ， 我 们 只 需要 在 调用 时 将 这 两 个 值 以 参数 形式 传递 给 它 即 可 。 又 
或 者 ， 我 们 可 以 将 extendCopyO 函 数 设计 为 接收 两 个 参数 : 第 一 个 参数 
不 变 ， 第 二 个 参数 是 包含 我 们 需要 的 额外 属性 的 对 象 ， 然 后 我 们 就 可 
以 在 函数 体 中 ， 使 用 这 些 额 外 属性 对 所 返回 的 搁 贝 进行 扩展 ， 或 者 换 
一 种 说 法 ， 将 第 一 个 参数 的 拷贝 与 第 二 个 参数 合并 。 


6.8 深 找 贝 


在 之 前 的 讨论 中 ，extendCopy0O 函 数 以 及 再 之 前 的 extend20 函 数 所 
用 的 创建 方式 叫做 浅 找 贝 (shallow copy) 。 与 之 相对 的 ， 当 然 就 是 所 
谓 的 深 找 贝 (deep copy) 了 “。 经 过 之 前 章节 ( 即 6.6) 的 讨论 ， 我 们 已 
经 知道 当 对 象 被 找 贝 时 ， 实 际 上 拷贝 的 只 是 该 对 象 在 内 存 中 的 位 置 指 
和 针 。 这 一 过 程 就 是 所 谓 的 浅 找 贝 ， 在 这 种 情况 下 ， 如 果 我 们 修改 了 找 
由 对 象 ， 束 等同 于 修改 了 原 对 象 。 而 深 找 贝 则 可 以 帮助 我 们 避免 这 方 
面 的 问题 。 

深 揽 贝 的 实现 方式 与 浅 揽 贝 基本 相同 ， 也 需要 通过 遇 历 对 象 的 属 
性 来 进行 拷贝 操作 。 只 是 在 遇 到 一 个 对 象 引 用 性 的 属性 时 ， 我 们 需要 
再 次 对 其 调用 深 搁 贝 玫 数 : 

function deepCopy(p, ©) { 

人 中 


for (vari in p) { 


让 (p.hasOwnProperty(i)) { 
让 (typeof p[i === 'object") { 
c[i] = Array.isArray(p[i]) ? [] : {}; 
deepCopy(pli], c[i]); 
} else { 
cli] = plij; 
} 
} 
} 
return c; 
} 
现在 我 们 来 创建 一 个 对 象 ， 该 对 象 包含 数组 和 子 对 象 : 


var parent = { 
numbers: [1, 2, 3], 
letters: ['a', 'b', 'c'], 
obj: { 
prop: 1 
上 
bool': true 
}; 
下 面 ， 我 们 分 别 用 深 找 贝 和 浅 拷贝 测试 一 下 ， 束 会 发 现 两 者 的 不 
同 。 在 深 拷 贝 中 ， 对 拷贝 对 象 的 numbers 属 性 进行 更 新 不 会 对 原 对 象 产 
影响 。 
> Var mydeep = deepCopy(parent); 
> var myshallow = extendCopy(parent); 
> mydeep.numbers.push(4,5,6); 
6 
> mydeep.numbers; 
[1, 2, 3, 4, 5, 6] 
> parent.numbers; 
[1, 2, 3] 
> myshallow.numbers.push(10); 
4 
> myshallow.numbers; 
[1, 2, 3, 10] 
> parent.numbers; 
[1, 2, 3, 10}; 
> mydeep.numbers; 
[1, 2, 3, 4, 5, 6] 


使 用 deepCopy0 函 数 要 注意 两 点 。 
令 在 找 贝 每 个 属性 之 前 ， 建 议 使 用 hasOwnProperty0) 来 确认 不 会 误 
拷贝 不 需要 的 继承 属性 。 
令 由 于 区 分 Array Le J 对 象 相当 繁 瑛 ， 所 以 ES5 标 
准 中 实现 了 Array.isArray(0) 函 数 。 这 个 跨 浏览 右 的 最 佳 解决 方案 ( 换 句 
话说 ， 为 仅 支 持 ES3 的 环境 提供 En 虽然 看 起 来 有 点 取 巧 ， 
但 却 是 有 效 的 。 
if (Array.isArray !== "function") { 
Array.isArray = function (candidate) { 
return 
Object.prototype.toString.call(candidate) === '[object Array]'; 
n 
} 


6.9 object() 


基于 这 种 在 对 象 之 间 直 接 构 建 继承 关系 的 理念 ，Douglas Crockford 
为 我 们 提出 了 一 个 建议 ， 即 可 以 用 object0 函 数 来 接收 父 对 象 ， 并 返回 
一 个 以 该 对 象 为 原型 的 新 对 象 。 
function object(o) { 
function FO {} 
F.prototype = 0; 
return new F(); 
} 
如 果 我 们 需要 访问 uber 属 性 ， 可 以 继续 object0) 函 数 ， 具 体 如 下 : 


function object(o) { 


Var Di; 
function FO {} 
F.prototype = 0; 
n = new F(); 
n.uber = 0; 
return n; 
} 
这 个 函数 的 使 用 与 extendCopy0 基 本 相同 : 我 们 只 需要 将 某 个 对 象 
(例如 twoDee) 传递 给 它 ， 并 由 此 创建 一 个 新 对 象 。 然 后 再 对 新 对 象 
进行 后 续 的 扩展 处 理 。 
var triangle = object(twoDee); 
triangle.name = "Triangle'; 
triangle.getArea = function(){ 
return this.side * this.height / 2; 
上 
新 triangle 对 象 的 行为 依然 不 变 : 
> triangle.toString() 
"shape, 2D shape, Triangle" 
这 种 模式 也 被 称 为 原型 继承 ， 因 为 在 这 里 ， 我 们 将 父 对 象 设置 成 
了 子 对 象 的 原型 。 这 个 object(0) 范 数 被 ES5 所 采纳 ， 并 且 更 名 为 
Object.create()。 例 如 : 


> Var Square = Object.create(triangle); 


6.10 原型 继承 与 属 ' 和 混合 惟 


对 于 继承 来 说 ， 主 要 目标 束 是 将 一 些 现 有 的 功能 归 为 己 有 。 也 束 
征 说 ， 我 们 在 新 建 一 个 对 象 时 ， 通 向 首 移 应 该 继承 于 现 有 对 象 ， 然 后 
再 为 其 添加 额外 的 方法 与 属性 。 对 此 ， 我 们 可 以 通过 一 个 函数 调用 来 
完成 ， 并 且 在 其 中 混合 使 用 我 们 刚才 所 讨论 的 两 种 方式 。 

具体 而 言 丈 旦 : 

使 用 原型 继承 的 方式 ， 将 一 个 已 有 对 象 设置 为 新 对 象 的 原型 。 

新 建 一 个 对 象 后 ， 将 另 一 个 已 有 对 象 的 所 有 属性 捞 贝 过 来 。 


function objectPlus(o, stuff) { 


Var Di; 
function FO {} 
F.prototype = 0; 
n = new F(); 
n.uber = 0; 
for (var i in stuff) { 
n[i] = stuff[i]; 
1 
return n; 
} 
这 个 画 数 接受 两 个 参数 ， 其 中 对 象 o 用 于 继承 ， 而 男 一 个 对 和 象 stuff 
则 用 于 拷贝 方法 与 属性 。 下 面 我 们 来 看 看 实际 应 用 。 
首先 ， 需 要 一 个 基本 对 象 shape: 


var Shape = { 


name: 'shape, 
toString: function() { 
return this.name; 


} 


接着 再 创建 一 个 继承 于 shape 的 2D 对 象 ， 并 为 其 添加 更 多 的 属性 。 
这 些 额外 的 属性 由 一 个 用 文本 标识 法 所 创建 的 匿名 对 象 提供 。 
var twoDee = objectPlus(shape, { 
name: '2D shape, 
toString: function(){ 
return this.uber.toString() + ', ' + this.name; 
} 
月; 
现在 ， 我 们 来 创建 一 个 继承 于 2D 对 象 的 triangle 对 象 ， 并 为 其 添加 
一 些 额外 的 属性 。 
var triangle = objectPlus(twoDee, { 
name: "Triangle, 
getArea: function(){ 
return this.side * this.height / 2; 
}, 
side: 0， 
height: 0 
}); 
下 面 我 们 来 测试 一 下 : 创建 一 个 具体 的 triangle 对象 my， 并 上 自 定 
义 其 side 和 height 属 性 。 
> var my = objectPlus(triangle, { 
side: 4, height: 4 
}); 
> my.getAreal(); 
8 
> my.toString(); 
"shape, 2D shape, Triangle, Triangle" 


这 里 的 不 同 之 处 在 于 ， 当 toStringO 函 数 被 执行 时 ，Triangle 的 name 
属性 会 被 重复 两 次 。 这 是 因为 我 们 在 具 现 化 实例 时 是 继承 于 triangle 对 
象 的 ， 所 以 这 里 多 了 一 层 继承 关系 。 我 们 也 可 以 给 该 实例 一 个 新 的 
name 属 性 。 例 如 : 

> objectPlus(triangle, { 

side: 4, 

height: 4, 

name: "My 4x4' 

}).toString(); 

"Shape, 2D shape, Triangle, My 4x4" 

这 里 的 objectPlus(0) 芳 数 的 实现 方式 比 起 之 前 提 到 的 object() 更 接近 
ES5 的 Object.create0。 只 是 ES5 的 实现 中 ， 附 加 属性 (也 就 是 第 二 个 参 
数 ) 是 通过 属性 描述 符 提供 的 〈 见 附录 C: 内 建 对 象 ) 。 


6.11 多 重 继 承 


所 谓 的 多 重 继承 ， 通 常 指 的 古 一 个 子 对 象 中 有 不 止 一 个 父 对 象 的 
继承 模式 。 对 于 这 种 模式 ， 有 些 面向 对 象 程序 语言 文 持 ， 有 些 则 不 文 
持 。 我 们 可 以 对 它们 进行 一 些 杜 别 ， 目 行 判断 在 复杂 的 应 用 程序 设计 
中 多 重 继承 旦 否 能 融 来 方便 ， 或 着 旦 人 否 有 这 种 必要 使 用 它 ， 以 及 它 旦 
否 会 比 原型 链 的 方式 更 好 。 但 无 论 如 何 ， 对 于 JavaScript 这 样 的 动态 语 
言 来 说 ， 实 现 多 重 继承 站 很 简单 的 ， 尽 管 语言 本 身 没 有 为 此 提供 特殊 
的 语法 单元 。 现 在 ， 让 我 们 暂且 移 离 开 一 下 这 个 讨论 多 重 继承 利弊 的 
漫漫 长 夜 ， 去 实现 中 感受 一 下 多 重 继承 的 用 法 吧 。 

多 重 继承 实现 是 极其 简单 的 ， 我 们 只 需要 延续 属性 拷贝 法 的 继承 
思路 依次 扩展 对 象 即 可 ， 而 对 参数 中 所 继承 的 对 象 的 数量 没有 限制 。 


下 面 ， 我 们 来 创建 一 个 multi0 函 数 ， 它 可 以 接受 任意 数量 的 输入 性 
对 象 。 然 后 ， 我 们 在 其 中 实现 了 一 个 双重 循环 ， 内 层 循环 用 于 拷贝 属 
性 ， 而 外 层 循 环 则 用 于 允 历 函数 参数 中 所 传递 进来 的 所 有 对 象 。 


function multi() { 


var n = {}, stuff, j = 0, len = arguments.length:; 
for (j = 0; j < len; j++) { 
stuff = arguments[j]; 
for (var i in stuff) { 
if(stuff has Own Property(1) ){ 
n[i] = stuff[i]; 
} 
} 
return n; 
} 
现在 来 测试 一 下 : 首先 ， 我 们 需要 创建 shape、twoDee 以 及 一 个 匿 
名 对 象 。 然 后 调用 multi0 函 数 ， 将 这 三 个 对 象 作 为 参数 传递 ， 该 函数 会 
返回 新 建 的 triangle 对 象 。 
var Shape = { 
name: 'shape, 
toString: function() { 
return this.name; 
} 
由 
var twoDee = { 
name: '2D shape ， 


dmensions: 2 


由 


var triangle = multi(shape, twoDee, { 

name: "Triangle, 

getArea: function(){ 

return this.side * this.height / 2; 

le 

side: 5， 

height: 10 
月; 
然后 ， 让 我 们 来 看 看 它 是 否 可 以 工作 。getArea() 方 法 应 该 是 独 有 属 
dimensions 则 应 该 是 目 twoDee 而 来 的 继承 属性 ，toString0 则 是 从 


shape 继 承 而 来 的 : 


的 。 


> triangle.getAreal(); 

25 

> triangle.dimensions; 

2 

> triangle.toString(); 

"Triangle" 

要 注意 的 是 ，multi0 中 的 循环 是 按照 对 象 的 输入 顺序 来 进行 明 历 
如 有 果 其 中 两 个 对 象 拥有 相同 的 属性 ， 前 一 个 就 会 被 后 一 个 履 盖 。 
混合 插入 

在 这 里 ， 我 们 需要 了 解 一 种 叫做 混合 插入 (mixins) 的 技术 。 我 们 


可 以 将 其 看 做 一 种 为 对 象 提 供 某 些 实用 功能 的 技术 ， 只 不 过 ， 它 并 不 
是 通过 子 对 象 的 继承 与 扩展 来 完成 的 。 我 们 之 前 所 讨论 的 多 重 继承 实 


际 上 正 是 基于 这 种 技术 理念 来 实现 的 。 也 整 是 说 ， 每 当 我 们 新 建 一 个 
对 和 象 时 ， 可 以 选择 将 其 他 对 象 的 内 容 混 合 到 我 们 的 新 对 象 中 去 ， 只 
将 它们 全 部 传递 给 multi0 函 数 ， 我 们 就 可 以 在 不 建立 相关 继承 关系 树 的 
情况 下 获得 这 些 对 象 的 功能 。 


6.12 寄生 式 继承 


JavaScript 中 能 够 实现 继承 的 方式 有 很 多 。 如 果 您 渔 望 多 了 解 一 些 
这 方面 的 知识 ， 这 里 可 以 再 为 您 介绍 一 种 叫做 寄生 式 继承 的 模式 。 这 
是 由 Douglas Crockford 所 提出 的 技术 ， 基 本 思路 是 ， 我 们 可 以 在 创建 对 
象 的 钞 数 中 直接 吸收 其 他 对 象 的 功能 ， 然 后 对 其 进行 扩展 并 返回 。“ 束 
好 像 所 有 的 工作 都 是 目 己 做 的 一 样 ”。 
下 面 ， 我 们 用 对 象 标识 法 定义 了 一 个 普通 对 象 ， 这 时 它 还 看 不 出 
有 任何 被 寄生 的 可 能 性 : 
vartwoD={ 
name: '2D shape, 
dimensions: 2 
上 
然后 我 们 来 编写 用 于 创建 riangle 对 象 的 函数 。 
将 twoD 对 象 克 隆 进 一 个 叫做 that 的 对 象 ， 这 一 步 可 以 使 用 我 们 之 
前 所 讨论 过 的 任何 方法 ， 例 如 使 用 object0) 函 数 或 者 执行 全 属性 拷贝 。 
扩展 that 对 象 ， 添 加 更 多 的 属性 。 
返回 that 对 象 。 
function triangle(s, h) { 
var that = object(twoD); 
that.name ="Iriangle'; 
that.getArea = function(){ 
return this.side * this.height / 2; 
上 
that.side = S; 
that.height = bh; 


return that; 


} 

由 于 triangle0 只 是 个 一 般 函 数 ， 不 属于 构造 器 ， 所 以 调用 它 通 常 
是 不 需要 new 操 作 符 的 。 但 由 于 该 函数 返回 的 是 一 个 对 象 ， 所 以 即便 
我 们 在 函数 调用 时 错误 地 使 用 了 new 操 作 符 ， 它 也 会 按照 预定 的 方式 工 
作 。 

> var t = triangle(5, 10); 

> t.dimensions 

2 

> var t2 = new triangle(5,5); 

> t2.getAreal(); 

12.5 

注意 ， 这 里 的 that 只 是 一 个 名 字 ， 并 不 存在 与 保留 字 this 用 法 类 似 
的 特殊 含义 。 


6.13 构造 器 借用 


我 们 再 来 看 一 种 继承 实现 (这 是 本 章 最 后 一 个 了 ， 我 保证 ) 。 这 
需要 再 次 从 构造 器 函数 入 手 ， 这 回 不 直接 使 用 对 象 了 。 由 于 在 这 种 继 
承 模式 中 ， 子 对 象 构造 器 可 以 通过 call0 或 apply0) 方 法 来 调用 父 对 象 的 
构造 器 ， 因 而 ， 它 通常 被 称 为 构造 器 盗用 法 (stealing a constructor) ， 
或 者 构造 器 借用 法 (borrowing a constructor) ， 如 果 您 想 更 含 荔 一 点 的 
话 。 

尽管 cal0 和 apply0O 这 两 个 方法 在 第 4 章 : 对 象 中 均 已 经 讨论 过 ， 但 
这 里 我 们 要 更 进一步 。 正 如 您 所 知 ， 这 两 个 方法 都 允许 我 们 将 某 个 指 
定 对 象 的 this 值 与 一 个 函数 的 调用 绑 定 起 来 。 这 对 于 继承 而 言 ， 就 意 


味 着 子 对 象 的 构造 器 在 调用 父 对 象 构 造句 时 ， 也 可 以 将 子 对 象 中 新 建 
的 this 对 象 与 父 对 象 的 this 值 绑 定 起 来 。 
下 面 ， 我 们 来 构建 一 个 父 类 构造 器 Shape(): 
function Shape(id) { 
this.id = id; 

} 

Shape.prototype.name = 'shape'; 

Shape.prototype.toString = function(){ 

return this.name; 

}; 
现在 我 们 来 定义 Triangle0 构 造 器 ， 在 其 中 通过 apply0 方 法 来 调用 
Shape0 构 造 器 ， 并 将 相关 的 this 值 ( 即 hew Triangle() 所 创建 的 示例 ) 和 
其 他 一 些 参数 传递 该 方法 。 

function Triangle() { 

Shape.apply(this, arguments); 

} 

Triangle.prototype.name = "Triangle'; 

注意 ， 这 里 无 论 是 Triangle0 还 是 Shape0 都 在 其 各 自 的 原型 中 添加 
些 额外 的 属性 。 

下 面 ， 我 们 来 测试 一 下 ， 先 新 建 一 个 triangle 对 象 : 

> var t= new Triangle(101); 

> tname; 

"Triangle" 

在 这 里 ， 新 的 friangle 对 象 继承 了 其 父 对 象 的 id 属 性 ， 但 它 并 没有 
继承 父 对 象 原型 中 的 其 他 任何 东西 : 

> t.id; 

101; 


> t.toString(); 

"[object Object]" 

之 所 以 triangle 对 象 中 不 包含 Shape 的 原型 属性 ， 是 因为 我 们 从 来 没 
有 调用 new Shape() 创 建 任何 一 个 实例 ， 目 然 其 原型 也 从 来 没有 被 用 
到 。 这 很 容易 做 到 ， 例 如 在 本 章 最 初 的 那个 示例 中 ， 我 们 可 以 对 
Triangle() 构 造 絮 进行 如 下 重 定义 : 

function Triangle() { 

Shape.apply(this, arguments); 

} 

Triangle.prototype = new Shape(); 

Triangle.prototype.name = "Triangle'; 

在 这 种 继承 模式 中 ， 父 对 象 的 属性 是 以 子 对 象 上 自身 属性 的 身份 来 
重建 的 。 这 也 体现 了 构造 器 借用 法 的 一 大 优势 : 当 我 们 创建 一 个 继承 
于 数组 或 者 其 他 对 象 类 型 的 子 对 象 时 ， 将 获得 一 个 完 完全 全 的 新 值 
(不 是 一 个 引用 ) ， 对 它 做 任何 修改 都 不 会 影响 其 父 对 象 。 

但 这 种 模式 也 是 有 缺点 的 ， 因 为 这 种 情况 下 父 对 象 的 构造 器 往往 
会 被 调用 两 次 : 一 次 发 生 在 通过 apply(0) 方 法 继承 其 自身 属性 时 ， 而 另 
一 次 则 发 生 在 通过 new 操作 符 继承 其 原型 时 。 这 样 一 来 ， 父 对 象 的 自 
号 属性 事实 上 被 继承 了 两 次 。 下 面 让 我 们 来 做 一 个 简单 的 演示 : 

function Shape(id) { 

this.id = id; 
} 


function Triangle() { 


Shape.apply(this, arguments); 


} 
Triangle.prototype = new Shape(101); 
然后 我 们 新 建 一 个 实例 : 


> vart = new Triangle(202); 

> t.id; 

202 

如 您 所 见 ， 对 和 象 中 有 一 个 自身 属性 id， 但 它 并 非 来 自 原型 链 中 ， 我 
们 可 以 执行 如 下 验证 : 

>t. proto__.id; 

101 

> delete t.id; 

true 

> t.id; 

101 

首 用 构造 全 与 原型 复制 

对 于 这 种 由 于 构造 器 的 双重 调用 而 带 来 的 重复 执行 问题 ， 实 际 上 
是 很 容易 更 正 的 。 我 们 可 以 在 父 对 象 构造 器 上 调用 apply0) 方 法 ， 以 获 
得 其 全 部 的 目 喘 属性 ， 然 后 再 用 一 个 侧 单 的 适 代 絮 对 其 原型 属性 执行 
逐 项 拷贝 (这 也 可 以 使 用 之 前 讨论 的 extend20 方 法 来 完成 ) 。 例 如; 

function Shape(id) { 

this.id = id; 
} 
Shape.prototype.name = 'Shape,; 


Shape.prototype.toString = function(){ 
return this.name; 

}; 

function Triangle() { 
Shape.apply(this, arguments); 

lL 

extend2(Triangle, Shape); 


Triangle.prototype.name = "Triangle '; 
下 面 测试 一 下 : 

> vart = new Triangle(101); 

> t.toString(); 

"Triangle" 

> t.id; 

101 

这 样 一 来 ， 双 重 继承 束 不 见 了 

> typeof t._ proto__.id; 

"undefined" 

如 果 必 要 的 话 ，extend2() 还 可 以 访问 对 象 的 uber 属 性 : 
> t.uber.name; 


"Shape" 


6.14 小 结 


在 本 章 ， 我 们 学 习 了 一 系列 用 于 实现 继承 的 方法 (模式 ) 。 表 6-1 
罗列 了 这 些 方法 。 它 们 大 致 上 可 以 分 为 两 类 。 
基于 构造 器 工作 的 模式 。 
基于 对 象 工作 的 模式 。 
此 外 ， 我 们 也 可 以 基于 以 下 条 件 对 这 些 模式 进行 分 类 。 
是 否 使 用 原型 。 
是 否 执 行 属性 找 贝 。 
两 者 都 有 〈 即 执行 原型 属性 拷贝 ) 。 
表 6-1 


方法 


方法 
名 称 


原型 链 
法 〈 仿 
传统 ) 


代码 示例 所 属 模式 


。 基于 构造 器 
工作 的 模式 


Child.prototype = new Parent () ; 


技术 注解 


。 默认 继承 机 制 

。 提示 : 我 们 可 以 将 方法 与 
属性 集中 可 重用 的 部 分 迁移 
到 原型 链 中 ， 而 将 不 可 重用 
的 那 部 分 设置 为 对 象 的 自身 
属性 


。 使 用 原型 链 
模式 


方法 


方法 
名 称 


Child.prototype = Parent. 


prototype; 


function extend (Child, Parent) { 


Var F = function(){}; 


F.prototype = Parent. 


prototype; 
临时 构 . 
3 、 Child.prototype = new F(); 
造 器 法 | 
Child.prototype.constructor = 


Child; 
Child.uber = Parent.prototype; 


function extend2 (Child, Parent) { 
var p =: Parent .prototype; 


Var 下 


Child.prototype; 


for (var 1 in py 
cl[il = plil]; 


c.uber = p; 

function extendCopy(p) 1 
人 

fer (var: 立 La BY 

= p[li]; 


Va Cs 


[el 区 光 | 


代码 示例 所 属 模 式 


技术 注解 


。 基于 构造 器 |。 由 于 该 模式 在 构建 继承 关 
工作 的 模式 系 时 不 需要 新 建 对 象 实例 ， 
。 原型 拷贝 模 | 效率 上 会 有 较 好 的 表现 

式 ( 不 存在 原型 |。 原型 链 上 的 查询 也 会 比较 
链 , 所 有 的 对 象 | 快 ， 因 为 这 里 根本 不 存在 链 
共享 一 个 原型 |。 缺点 在 于 ， 对 子 对 象 的 修 
改 会 影响 其 父 对 象 

。 此 模式 不 同 于 1 号 方法 ， 
它 只 继承 父 对 象 的 原型 属 
性 ， 而 对 于 其 自身 属性 〈 也 
就 是 被 构造 器 添加 到 this 
值 中 的 属性 ) 则 不 予 继承 
。 另外 ， 该 模式 还 为 我 们 访 
问 父 对 象 提供 了 便利 的 方式 
( 即 通 过 uber 属性 ) 


。 基于 构造 器 
工作 的 模式 

。 使 用 原型 链 
模式 


。 将 父 对 象 原型 中 的 内 容 全 
部 转换 成 子 对 象 原型 属性 
。 无 须 为 继承 单独 创建 对 象 
实例 

。 原型 链 本 身 也 更 短 


。 非常 简单 
。 没有 使 用 原型 属性 


续 表 


方法 


名 称 


同上 , 只 需 在 遇 到 对 象 类 型 时 重复 调用 上 述 | 作 和 有 


函数 即 可 


function object(o) { 
function F() {} 
7 l F.prototype = o; 


return new F(); 


function objectPlus(o, stuff) { 
Var n; 
function F() {} 
F.prototype = 0o; 
n = new F(); 
8 n.uber = 0o; 
for (var i in stuff) { 
入 人] 三 StiEEf[E]? 
} 


return n; 


function multi() { 

th Stuff£, 3 
arguments.length; 
j++) 1 


var n = 
len = 


;7 ens 


for (j 
stuff = 


arguments[j]; 
9 for (var tt Tn Stuff) 1 

n[i] = stuff[i]; 
} 


return n; 


技术 注解 


。 基于 对 象 工 | 与 方法 5 基本 相同 ， 但 所 有 
对 象 执 行 的 都 是 值 传递 


。 基于 对 象 工 
作 模 式 


。 和 技 开 仿 类 机 制 ， 直 接 在 对 
象 之 间 构 建 继承 关系 
。 发 挥 原型 固有 优势 


。 基于 对 象 工 
作 模 式 

。 使 用 原型 链 
模式 

。 属性 拷贝 
模式 


。 该 方法 实际 上 是 原型 继承 
法 (方法 7) 和 属性 拷贝 法 
(方法 5) 的 混合 应 用 
。 它 通过 一 个 函数 一 次 性 完 
成 对 象 的 继承 与 扩展 


。 一 种 混合 插入 式 (mixin- 
style) 继承 实现 

。 它 会 按照 父 对 象 的 出 现 
顺序 依次 对 它们 执行 属性 
全 拷贝 


方法 | 方法 


技术 注解 
号 | 名 称 
function Parasite(victim) { 。 基于 对 象 工 |。 该 方法 通过 一 个 类 似 构 造 
var that = object (victim); 作 模 式 器 的 函数 来 创建 对 象 
寄生 继 ey eh 
10 承 法 that .more = 1; 。 使 用 原型 链 |。 该 函数 会 执行 相应 的 对 象 
| 模式 拷贝 ， 并 对 其 进行 扩展 ， 然 
后 返回 该 拷贝 
基于 构造 器 工 |e 该 方法 可 以 只 继承 父 对 象 
作 模 式 的 自身 属性 
. | e 可 以 与 方法 1 结合 使 用 ， 
funcetion Child()y 1 _ 
构造 器 | 以 便 从 原型 中 继承 相关 内 容 
11 Parent .apply (this, arguments); 
借用 法 。 它 便于 我 们 的 子 对 象 继 承 


茶 个 对 象 的 具体 属性 (并 且 
还 有 可 能 是 引用 类 属性 ) 时 ， 


选择 最 简单 的 处 理 方式 
| 。 使 用 构造 器 |。 该 方法 是 方法 11 与 方法 4 
构造 器 |function Child() { 
| 工作 模式 的 结合 体 
借用 与 Parent.apply (this, arguments); 
12 属性 找 。 使 用 原型 链 |。 它 允 许 我 们 在 不 重复 调用 
和 模式 父 对 象 构造 器 的 情况 下 同时 


贝 法 lextend2 (Child, Parent); 


。 属性 拷贝 模式 | 继承 其 自身 属性 和 原型 属性 


面 对 这 么 多 方法 ， 我 们 应 该 如 何 做 出 正确 的 选择 呢 ? 事实 上 这 取 
决 于 我 们 的 设计 风格 、 性 能 需求 、 具体 项 目 任 务 及 团队 。 例 如 ， 您 是 
否 更 习惯 于 从 类 的 角度 来 解决 问题 ? 那么 基于 构造 器 工作 模式 更 适合 
您 。 或 者 您 可 能 只 关心 该 “类 ”的 某 些 具体 实例 ， 那 么 可 能 使 用 基于 对 
象 的 模式 更 合适 。 

那么 ， 继 承 实现 是 否 只 有 这 些 呢 ? 当然 不 是 ， 我 们 可 以 从 上 面 的 
表 中 选择 任何 一 种 模式 ， 也 可 以 混合 使 用 它们 ， 甚 至 我 们 也 可 以 写 出 
我 们 自己 的 方法 。 重 点 在 于 必须 理解 并 熟悉 这 些 对 象 、 原 型 以 及 构造 
稻 的 工作 方式 ， 剩 下 的 莽 商 单 了 。 


6.15 洛 习 : 2 


下 面 ， 让 我 们 用 一 个 更 为 具体 的 继承 应 用 示例 来 作为 本 章 的 结尾 
吧 。 示 例 的 任务 是 计算 各 种 不 同 图 形 的 面积 和 边界 ， 然 后 将 它们 绘制 
出 来 。 并 且 ， 要 求 在 这 过 程 中 尽 可 能 地 实现 代码 重用 。 


6.15.1 分 析 


自 完 ， 我 们 要 将 所 有 对 象 的 公共 部 分 定义 成 一 个 构造 器 ， 即 
Shape。 人 然后 我 们 基于 这 个 构造 器 分 别 构建 我 们 的 Triangle、Rectangle 和 
Square 构造 器 ， 它 们 将 全 部 继承 于 Shape。 其 中 ，Square 实际 上 可 以 被 
当做 一 个 长 宽度 相等 的 Rectangleg， 因 此 当 我 们 构建 Square 时 可 以 直接 
重用 Rectangle。 

下 面 ， 我 们 来 定义 Shape 对 象 ， 百 先 ， 我 们 要 定义 一 个 带 x、y 坐 标 
的 point 对 象 。 图 形 一 般 都 是 由 若干 个 point 组 成 的 。 例 如 ， 定 义 一 个 
Triangle 对 象 需要 三 个 point 对 象 ， 而 定义 一 个 Rectangle 对 象 (为 了 让 是 
目 尽 可 能 简单 ) 需要 定义 一 个 point 对 象 和 其 长 宽度 。 图 形 的 周 长 一 般 
是 其 各 边 长 度 的 综合 ， 而 计算 一 个 图 形 的 面积 的 公式 则 随 图 形 不 同 有 
较 大 差异 ， 应 该 由 这 些 图 形 自 己 来 实现 。 

这 样 一 来 ，Shape 体 系 中 的 共有 属性 主要 包括 : 

一 个 能 根据 给 定 的 point 绘制 出 图 形 的 draw0 方 法 。 

一 个 getParameter() 方 法 。 

一 个 用 于 存储 point 对 象 的 数组 属性 。 

其 他 必须 的 属性 与 方法 。 

天 于 绘制 部 分 ， 我 们 还 将 用 到 <canvas> 标 签 。 尺 管 早期 的 三 并 不 支 
持 这 一 特性 ， 但 管 它 呢 ， 这 不 过 是 个 练习 。 


当然 ， 还 有 两 个 辅助 构造 右 不 能 不 提 Point 和 Line。 其 中 ， 
Point 用 于 定义 图 形 ， 而 Line 则 用 于 计算 给 定 两 个 点 之 间 的 距离 。 

读者 也 可 以 到 http://www.phpied.com/files/canvas/ 中 去 运行 该 工作 示 
例 ， 只 需 打 开 控 制 台 ， 然 后 按部就班 新 建 图 形 即 可 。 


6.15.2 实现 


首先 ， 我 们 要 在 空白 的 HTML 页 面 中 添加 一 个 canvas 标 签 : 
<canvas height="600" width="800" id="canvas" /> 
然后 再 插入 <script> 标 签 ， 我 们 的 JavaScript 代 码 就 要 放 在 这 里 
<script> 
// ... code goes here 
</script> 
下 面 ， 我 们 来 实现 JavaScript 部 分 的 工作 。 甫 先是 定义 辅助 构造 絮 
Point， 最 人 简单 的 实现 方法 如 下 : 
function Point(x, y) { 
this.x = X; 
this.y = y; 
} 
要 注意 的 是 ， 该 画布 〈 即 canvas) 的 坐标 系 是 从 x=0、y=0 这 点 开始 
的 ， 即 图 6-3 中 的 于 上 角 ， 而 右 下 角 的 坐标 则 是 x=800、y=600。 


图 6-3 
接 下 来 ， 轮 到 构造 器 Line 了 ， 它 将 会 根据 急 股 定理 az + b2- = c 公 


式 计算 出 给 定 两 点 之 间 的 直线 距离 〈 假 设 这 两 点 位 于 一 个 右 直 角 三 角 
形 的 斜 边 两 端 ) 。 
function Line(p1, p2) { 


this.pl = pl; 

this.p2 = p2; 

this.length = Math.sqrt( 
Math.pow(p1.x - p2.X, 2) + 
Math.pow(pl.y ~ p2.y, 2) 

); 

’ 

下 一 步 ， 我 们 就 可 以 进入 Shape 构 造 器 的 定义 了 。 该 构造 器 需要 有 
一 个 自己 的 points 属 性 〈 以 及 链接 这 些 point 的 Lines 属 性 ) 。 另 外 我 们 还 
需要 一 个 初始 化 方法 init0， 用 于 定义 其 原型 。 

function ShapeO { 


this.points = [; 
this.lines = []; 
this.init(); 

" 

接 下 来 进入 正题 : 定义 Shape.Prototype 的 方法 。 下 面 我 们 用 对 象 标 
识 法 来 定义 所 有 的 方法 。 其 中 ， 我 们 对 每 个 方法 做 了 相关 的 注释 说 
明 。 

Shape.prototype = { 

// reset pointer to constructor 
constructor: Shape, 
// initialization, sets this.context to point 
// to the context if the canvas object 
init: function () { 
if (this.context === undefined) { 
var canvas = document.getElementByld( canvas'); 
Shape.prototype.context = canvas.getContext('2d'); 
} 
}; 
// method that draws a shape by looping through this.points 
draw: function () { 
var i, ctx = this.context; 
ctx.strokeStyle = this.getColor(); 
ctx.beginPath(); 
ctx.moveTo(this.points[0].x, this.points[0].y); 
for (i = 1; i<this.points.length; i++) { 
ctx.lineTo(this.points[i].x, this.points[i].y); 


上 


ctx.closePath(); 


ctX.Stroke(); 


// method that generates a random color 


getColor: function () { 


上 


var i, rgb = []; 
for (i= 0; i< 3; i++) { 
rgb[i] = Math.round(255 * Math.random()); 
} 
return Tgb( + rgb.join(,') + '")'; 


// method that loops through the points array, 


// creates Line instances and adds them to this.lines 


getLines: function () { 


上 


if (this.lines.length> 0) { 
return this.lines; 

} 

vari, lines = [j: 

for (i = 0; i<this.points.length; i++) { 
lines[i] = new Line(this.points[i], 
this.points[i + 11 || this.points[0}]); 

} 

this.lines = lines; 


return lines:; 


// shell method, to be implemented by children 


getArea: function () {}, 


// sums the lengths of all lines 
getPerimeter: function () { 
var i, perim = 0, lines = this.getLines(); 
for (i = 0; i<lines.length; i++) { 
perim += linesli].length; 
} 
return perim; 
} 
下 
接着 是 了 于 对 和 象 构造 硕 ， 先 从 Triangle 开 始 : 
function Triangle(a, b, c){ 
this.points = [a, b, cj]; 
this.getArea = functionO{ 
var p = this.getPerimeter(); 
s=p/2; 
return Math.sqgrt( 
S 
* (s - this.lines[0].length) 
* (s - this.lines[11].length) 
* (s - this.lines[21.length)); 
上 
} 
在 Triangle 构 造 右 中 ， 我 们 会 将 其 接收 到 的 三 个 point 对 象 赋值 给 
this.points (此 为 该 对 象 目 身 的 点 的 集合 ) 。 然 后 再 利用 海伦 公式 
(Heron's formula) 册 实现 其 getArea(0) 方 法 ， 公 式 如 下 : 
Area = s(s-a)(s-b)(s-c) 
其 中 ，s 为 半 周 长 ( 即 周 长 除 以 2) 。 


接 下 来 轮 到 Rectangle 构 造 器 了 ， 该 对 象 所 接收 的 参数 是 一 个 point 
对 象 ( 即 左上 角 位 置 ) 和 两 边 的 长 度 。 然 后 再 以 该 point 起 点 ， 自 行 填 
充 其 points 数 组 。 

function Rectangle(p, side_a, side_b){ 

this.points = [ 


Pp; 
new Point(p.x + side_a, p.y), // top right 
new Point(p.x + side_a, p.y + side_b), // bottom right 
new Point(p.x, p.y + side_b) // bottom left 
]; 


this.getArea = function() { 
return side a * side_b: 
上 
} 
最 后 一 个 子 对 象 构造 器 是 Square。 由 于 Square 是 Rectangle 的 一 种 特 
例 ， 所 以 对 于 它 的 实现 ， 我 们 可 以 重用 Rectangle， 而 其 中 最 简单 的 竟 
过 于 构造 右 借 用 法 了 。 
function Square(p, side){ 
Rectangle.call(this, p, side, side); 
】 
到 目前 为 止 ， 所 有 构造 器 的 实现 都 已 经 完成 。 让 我 们 开始 处 理 它 
们 之 间 的 继承 关系 ， 几 乎 所 有 的 仿 传统 模式 ( 即 工作 方式 是 基于 构造 
器 而 非 对 象 的 模式 ) 都 符合 我 们 的 需求 。 下 面 ， 让 我 们 来 试 着 将 其 修 
改 为 原型 链 模 式 ， 并 提供 一 个 简化 版 本 (第 一 种 方法 本 章 之 前 已 经 讨 
论 过 了 ) 。 在 该 模式 中 ， 我 们 需要 新 建 一 个 父 对 象 实 体 ， 然 后 直接 将 
其 设置 为 子 对 象 的 原型 。 这 样 一 来 ， 我 们 就 没有 必要 为 每 个 子 对 象 的 
原型 创建 新 的 实体 了 一 一 因为 它们 可 以 通过 原型 实现 完全 共享 。 


(function () { 
var s = new Shape(); 
Triangle.prototype = s; 
Rectangle.prototype = s; 
Square.prototype = s; 


DO; 
6.15.3 测试 


下 面 我 们 来 绘制 一 些 图 形 ， 测 试 一 下 代码 。 首 先 来 定义 Triangle 对 
象 的 三 个 point: 

> var pl = new Point(100, 100); 

> Var p2 = new Point(300, 100); 

> var p3 = new Point(200, 0); 

然后 将 这 三 个 point 传 递 给 Triangle 构 造 器 ， 以 创建 一 个 Triangle 实 
例 : 

> vart = new Triangle(p1, p2, p3); 

接着 ， 我 们 就 可 以 调用 相关 的 方法 在 画布 上 绘制 出 三 角形 ， 并 计 
算出 它 的 面积 与 周 长 : 


> t.draw(); 


> t.getPerimeter(); 

482.842712474619 

> t.getAreal(); 

10000.000000000002 

接 下 来 是 Rectangle 的 实例 化 : 

> varr= new Rectangle(new Point(200, 200), 50, 100); 


> r.draw(); 


> r.getAreal(); 

5000 

> r.getPerimeter(); 

300 

最 后 是 Square: 

> vars = new Square(new Point(130, 130), 50); 

> s.draw\(); 

> s.getAreal(); 

2500 

> s.getPerimeter(); 

200 

如 果 想 给 这 些 图 形 绘制 增加 一 些 乐趣 ， 我 们 也 可 以 像 下 面 这 样 ， 
在 绘制 Sguare 时 偷 个 懒 ， 重 用 triangle 的 point 。 

> new Square(p1, 200).draw(); 

最 终 测 试 结 末 如 图 6-4 所 示 : 


图 6-4 


6.16 练习 题 


1. 使 用 原型 继承 模式 (而 不 是 属性 拷贝 的 方式 ) 实现 多 重 继承 。 
例如 : 

var my = objectMulti(obj, another_obj, a_third, { 

additional: "properties" 

}); 

属性 additional 应 该 是 私有 属性 ， 而 其 他 属性 则 应 该 归并 入 
prototype 。 

2. 利用 上 面 的 画布 示例 展开 实践 ， 壬 试 各 种 不 同 的 东西 ， 例 如 : 

绘制 出 一 些 Triangle、Square、Rectangle 图 形 。 

添加 更 多 的 图 形 构造 右 ， 例 如 Trapezoid、Rhombus、Kite 以 及 
Pentagon 等 。 如 果 您 还 想 对 canvas 标 签 有 更 多 的 了 解 ， 也 可 以 创建 一 个 
Circle 构 造 器 ， 该 构造 器 需要 您 重 写 父 对 象 的 draw0 方 法 。 

考虑 一 下 ， 是 否 还 有 其 他 方式 可 以 实现 并 使 用 这 些 类 型 继承 天 
系 ， 从 而 解决 上 述 问 题 ? 

请 选择 一 个 子 对 象 能 通过 uber 属 性 访问 的 方法 ， 并 为 其 添加 新 的 功 
能 ， 使 得 父 对 象 可 以 追踪 到 该 方法 所 属 的 子 对 象 。 例 如 ， 或 许 我 们 可 


以 在 父 对 象 中 建立 一 个 用 于 存储 其 所 有 子 对 象 的 数组 属性 。 


7 章 浏览 


之 前 我 们 已 经 说 过 ， 运 行 JavaScript 程 序 需要 一 个 宿主 环境 。 到 目 
前 为 止 ， 本 书 所 讨论 的 大 部 分 内 容 都 是 围绕 着 ECMAScript/JavaScript 核 
心 标准 ， 以 及 多 种 不 同 的 答 主 环境 来 展开 的 。 下 面 ， 就 让 我 们 将 焦点 
转移 到 浏览 器 这 个 当下 最 流行 、 也 是 最 常见 的 JavaScript 和 欠 主 环境 上 来 
吧 。 在 这 一 章 中 ， 我 们 将 学 习 以 下 内 容 : 

BOM (Browser Object Model， 即 浏览 器 对 象 模型 ) 。 

DOM (Document Object Model， 即 文档 对 象 模型 ) 。 

浏 蜗 絮 事 件 。 

XMLHttpRequest 对 象 。 


7.1 在 HTML 入 JavaScript 代 码 
要 想 在 HTML 页 面 中 引入 J avaScript 代 码 ， 我 们 需要 用 到 <script> 标 
<IDOCTYPE> 
<html> 

<head> 


<title>JS test</title> 

<script src="somefile.js"></script> 
</head> 
<body> 


<script> 
vara= 1; 
att+: 
</script> 
</body> 
</html> 
在 上 面 的 示例 中 ， 第 一 个 <script> 标 志 引 入 的 是 一 个 外 部 文件 
somefile.js， 其 中 包含 了 相关 的 JavaScript 代 码 。 而 第 二 个 <script> 标 签 则 
是 直接 在 HTML 页 面 中 直接 插入 了 JavaScript 代 码 。 浏 贤 器 会 在 页 面 中 
按 顺 序 执行 所 有 的 JavaScript 代 码 ， 且 所 有 标签 中 的 代码 都 共享 同一 个 
名 字 空 间 (namespace) 。 也 就 是 说 ， 这 可 以 使 我 们 在 somefile.js 中 所 定 
义 的 变量 ， 在 第 二 个 <script> 区 块 中 依然 可 用 。 


7.2 概述 BOM 与 DOM 


通常 情况 下 ， 页 面 中 的 JavaScript 代 码 都 有 一 系列 可 以 访问 的 对 
象 ， 它 们 可 以 分 成 以 下 几 种 。 

ECMAScript 核心 对 象 : 我 们 在 之 前 儿 章 中 讨论 过 的 所 有 对 象 都 属 
此 类 3 

DOM: 当前 载 入 页 面 所 拥有 的 对 象 (页 面 有 时 也 可 以 叫做 文 
= 

BOM: 页 面 以 外 事物 所 拥有 的 对 象 即 浏览 器 


殉 | 
口 
支 
炎 
本 
油 


+ 


幕 ) 


其 中 ，DOM 意 为 文档 对 象 模 型 (Document Object Model) ， 而 
BOM 意 为 浏览 器 对 象 模型 (Browser Object Model) 。 


DOM 是 一 个 标准 ， 由 世界 万 维 网 联合 协会 (W3C) 负责 制定 ， 并 
拥有 多 个 不 同 的 版 本 。 这 些 版 本 我 们 称 之 为 level， 例 如 DOM level 1、 
DOM level 2 等 等 。 尽 管 ， 现 代 浏 览 器 对 这 些 标准 级 别 的 实现 程度 各 不 
相同 ,但 大 臻 上， 它们 基本 上 都 完全 实现 了 DOM level 1。DOM 实 际 上 
是 对 已 有 功能 的 标准 化 。 在 DOM 和 制定 之前， 各 浏览 句 都 有 各 目 访问 文 
档 的 实现 。 其 中 ， 有 相当 一 部 分 是 旧时 代 遗 留 下 来 的 产品 ( 即 W3C 标 
准 产 生 之 前 所 实现 的 部 分 | ， 我 们 将 其 统称 为 DOM 0。 尽 管 ， 实 际 上 
并 没有 一 个 叫做 DOM level 0 的 标准 存在 ， 但 其 中 相当 的 一 部 分 已 经 成 
了 事实 上 的 标准 ， 因 为 几乎 所 有 的 主流 浏览 器 对 此 提供 了 全 面 的 文 
持 ， 也 正 因 为 如 此 ， 它 们 中 的 一 些 内 容 也 被 写 入 DOM level 1 标准 。 至 
于 其 他 在 DOM level 1 中 找 不 到 的 DOM 0 的 内 容 ， 都 属于 特定 浏览 器 的 
特性 ， 这 里 就 不 必 讨 论 了 。 

而 BOM 则 不 是 任何 标准 的 一 部 分 。 与 DOM 0 相似 ， 它 的 一 部 分 对 
象 集合 得 到 了 上 所 有 主流 浏览 器 的 文 持 ， 而 另 一 部 分 则 属于 特定 浏览 器 
的 特性 。 由 于 HIML5 将 各 个 浏览 如 的 通用 行为 进行 了 标准 化 ， 所 以 其 
中 包含 了 通用 的 BOM 对 象 。 男 外 ， 移 动 设备 也 包含 一 些 特定 的 BOM 
对 象 (HIML5 同 样 致力 于 将 它们 标准 化 ) ， 这 些 对 象 一 般 没 有 必要 在 
果 面 计算 机 中 实现 ， 但 对 于 移动 设备 则 很 重要 ， 例 如 地 理 位 置 

( geolocation ) ， 摄 像 头 接 入 (camera access ) ， 震 动感 知 
vibration) ， 触 摸 事件 (touch events) ， 通 话 (telephony) 与 短信 收 
发 (SMS) 。 

本 章 将 只 讨论 BOM 和 DOM level 1 中 跨 浏 览 器 的 那 部 分 子 集 。 但 
即便 是 这 些 安全 的 子 集 也 是 一 个 很 大 的 话题 ， 也 不 是 本 书 所 能 完全 禾 
盖 的 ， 您 可 以 参考 以 下 资源 。 

MozilaDOM 人 参考 资料 : 

http://developer.mozilla.org/en/docs/Gecko_ DOM_ Reference 

Mozilla HTML5 维 基 百 科 : 


https://developer.mozilla.org/en-US/docs/HTML/HTMLS5 
Microsoft 在 线 文 档 : 
http://msdn2.microsoft.com/en-us/library/ms533050(vs.85).a spx 
W3C 的 DOM 技术 参考 : http:Wwww.w3.org/DOMVDOMTR 


7.3 BOM 


BOM ( 即 浏览 絮 对 象 模型 ， 是 一 个 用 于 访问 浏览 器 和 计算 机 屏幕 
的 对 象 集合 。 我 们 可 以 通过 全 局 对 象 window 来 访问 这 些 对 象 。 


7.3.1 window 对 象 再 探 


正如 您 所 知 ， [ew 每 个 宿主 环境 都 有 一 个 全 局 对 象 。 
具体 到 浏览 器 环境 中 ， 这 就 是 window 对 象 了 。 环 境 中 所 有 的 全 局 变量 
都 可 以 通过 该 对 象 的 属性 来 访问 ， 例 如 : 

> window.somevar = 1; 

1 

> somevar; 

1 

同样 的 ， 所 有 的 JavaScript 核心 函数 〈 即 我 们 在 第 2 章 : 基本 数据 
类 型 、 数 组 、 循 环 及 条 件 表 达 式 中 所 讨论 的 ) 也 都 是 window 对 象 的 方 
去 “例如 

> parselInt('123a456'"); 

123 

> window.parselInt(123a456'); 

123 


除了 作为 全 局 对 象 的 引用 以 外 ，window 对 象 还 有 另 一 个 作用 ， 就 
是 提供 关于 浏览 器 环境 的 信息 。 每 个 frame、iframe、 弹 出 窗 以 及 浏 贤 
怖 标签 页 都 有 各 目的 window 对 象 。 

下 面 ， 我 们 来 看 一 些 window 对 象 中 与 浏览 右 有 关 的 属性 。 当 然 ， 
这 些 属性 在 各 个 浏览 器 的 表现 中 可 能 各 不 相同 ， 所 以 我 们 将 尽量 局 限 
于 那些 为 现代 主流 浏 哎 器 所 共同 实现 的 、 最 为 可 徘 的 属性 。 


7.3.2 window.navigator 


navigator 是 一 个 用 于 反映 浏 唤 如 及 其 功能 信息 的 对 象 。 例 如 ， 
navigator. userAgent 属 性 是 一 个 用 于 浏 唤 絮 识别 的 长 字符 串 。 在 Firefox 
中 ， 我 们 将 得 到 如 下 信息 : 

> window.navigator.USerAgent; 

"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_3) 
AppleWebKit/536.28.10 (KHTM™ML, likeGecko) Version/6.0.3 
Safari/536.28.10" 

而 在 Microsoft 的 Internet Explorer 中 ，userAgent 返回 的 字符 串 则 
是 : 

"Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; Trident/6.0)" 

由 于 各 种 浏览 器 的 功能 是 各 不 相同 的 ， 开 发 人 员 有 时 需要 根据 
userAgent 字 人 符 串 来 识别 不 同 的 浏览 颖 ， 并 提供 不 同 版 本 的 代码 。 例 如 
在 下 面 的 代码 中 ， 我 们 就 是 通过 搜索 “MSIE” 了 于 串 来 识别 Intemet 
Explorer: 

if (navigator.userAgent.indexOf(MSIE') !== -1) { 

// this is IE 

} else { 

// not IE 


} 

当然 了 ， 最 好 还 是 不 要 过 份 依 赖 于 这 种 用 户 代 理 检 测 法 ， 特 性 监 
听 法 (也 叫做 功能 检测 法 ) 无 疑 是 更 好 的 选择 。 因 为 通过 这 种 字符 串 
很 难 妃 踩 到 所 有 的 浏览 郁 以 及 其 各 种 版 本 。 所 以 ， 直 搂 检 查 我 们 使 用 
的 功能 在 用 户 浏 览 亏 中 古人 否 存在 要 简单 得 多 ， 例 如 : 


if (typeof window.addEventListener === 'function') { 


// feature is supported, let's use it 
} else { 
// hmm, this feature is not supported, will have to 
// think of another way 
} 
另外 ， 还 有 一 个 原因 也 促使 我 们 避免 使 用 这 种 用 户 代 理 检测 法 ， 
因为 在 某 些 浏览 器 中 ， 用 户 是 可 以 对 该 字符 串 进行 修改 ， 并 将 其 伪装 
成 其 他 浏 时 古 的 。 


7.3.3 控制 台 的 备 起 功能 


控制 台 提 供 了 一 种 便利 的 对 象 检 索 功 能 ， 其 功能 涵盖 了 BOM 和 
DOM 中 所 有 的 对 象 。 因 此 通常 情况 下 ， 我 们 只 要 在 控制 台中 输入 : 
> navigator.; 


然后 蛙 击 其 结 采 ， 束 可 以 将 其 所 包含 的 属性 展开 ， 见 图 7-1。 


Developer Tools - http:/ /www.phpied.com/ 
局 一 - AS 
ao US 


> navigator; 
“了 Navigator 
appCodeName: "Mozilla" 
appName: "Netscape" 
appVersion: "5.8 (Macintosh; InteL Mac 05 X 19_7_5) AppleWebKit/537.4 (KHTML, like Ge 
cookieEnabled: true 
bp geolocation: Geolocation 
Language: "en-US" 
pmimeTypes: MimeTypeArray 
onLine: true 
platform: "MacIntel" 
Pp plugins: PluginArray 
product: "Gecko" 
productSub: "28838187" 
userAgent: "Mozilla/5.8 (Macintosh; Intel Mac 0S X 19_7_5) AppleWebKit/537.4 (KHTML, 
vendor: "Google Inc." 
vendorSsub: "" 
= __proto__: Navigator 


并 QQ © <topframe> 了 <page context> Vv oD | Errors Warnings Logs 


图 7-1 


7.3.4 window.location 


location 属性 是 一 个 用 于 存储 当前 载 入 页 面 URL 信息 的 对 象 。 例 
如 其 中 的 location.href 显 示 的 是 完整 的 URL ， 而 location.hostname 则 只 显 
示 相 关 的 域名 信息 。 下 面 ， 我 们 通过 一 个 简单 的 循环 列 出 location 对 象 
的 完整 属性 列表 。 

假设 我 们 的 页 面 ，URI 为 

http:/search.phpied.com:8080/search?p=java&ewhat=script#results， 那 
么 : 

for(var i in location) { 

if(typeof location[i] === “string”) { 


console.log(i 于 二- 太 location[i] + ps 


href = "http://search.phpied.com:8080/search? 
qd=java&what=script#results" 

hash = "#7results" 

host = "search.phpied.com:8080" 

hostname = "search.phpied.com" 

pathname = "/search" 

port = "8080" 

protocol = "http:" 

search = "?gq=java&what=script" 

另外 ，location 对 象 还 提供 了 三 个 方法 ， 分 别 是 reload()、assign() 
replace()。 

将 当前 页 面 导 航 到 新 的 页 面 存在 着 许多 种 不 同 的 方式 ， 下 面 列 出 
的 只 是 其 中 一 小 部 分 : 


> window.location.href = 'http:/www.packtpub.com'; 


> location.href = 'http:/www.packtpub.com'; 

> location = 'http:/www.packtpub.com'; 

> location.assign('http:/www.packtpub.com'); 

replace() 方 法 的 作用 与 assign0 基 本 相同 ， 只 不 过 它 不 会 在 浏览 器 的 
历史 记录 表 中 留 下 记录 : 

> location.replace('http:/www.yahoo.com'); 

另外 ， 如 采 我 们 想 重 新 载 入 某 个 页 面 ， 可 以 调用 : 

> location.reload(); 

或 者 ， 也 可 以 让 location.href 属 性 再 次 指 回 目 己 ， 比 如 : 

> window.location.href = window.Jocation.href; 

还 可 以 再 简化 一 下 : 


> location = location:; 


7.3.5 window.history 


window.history 属 性 允许 我 们 以 有 限 的 权限 操作 同一 个 浏览 右 会 话 
(session) 中 的 已 访问 页 面 。 例 如 ， 我 们 可 以 通过 以 下 方式 来 查看 用 

户 在 这 之 前 访问 了 多 少 页 面 : 

> window.history.length; 

5 

基于 隐私 保护 ， 我 们 无 法 获得 这 些 页 面具 体 的 URL， 例 如 像 下 面 
这 样 是 不 被 允许 的 : 

> window.history[0]; 

但 是 我 们 可 以 在 当前 用 户 会 话 中 对 各 页 面 进行 来 回 切换 ， 就 像 您 
在 浏览 器 中 单 击 后 退 /前 进 按钮 一 样 : 

> history.forward(); 

> history.back(); 

另外 ， 我 们 也 可 以 用 history.go0) 来 实现 页 面 跳 转 ， 例 如 ， 下 面 的 调 
用 效果 和 history.back() 相 同 : 

> history.go(-1); 

接 下 来 是 后 退 两 页 的 情况 : 

> history.go(-2); 

如 果 想 重 载 当 前 页 ， 可 以 这 样 : 

> history.go(0); 

另外， 如 今 更 新 版 的 浏览 器 也 对 HTML5 的 History API 提 供 了 支 
持 ， 这 些 API 人 允许 我 们 在 不 对 整体 页 面 进行 重 载 的 情况 下 更 改 其 中 的 
URL。 这 为 我 们 提供 了 一 种 近乎 完美 的 动态 页 面 ， 因 为 它 允 许 用 户 对 
特定 的 页 面 进行 书签 记录 ， 以 代表 应 用 程序 的 某 一 状态 ， 这 样 一 来 ， 
当 他 们 之 后 返回 到 (或 与 朋友 们 分 享 ) 该 页 面 时 就 能 通过 该 URL 恢 复 


该 应 用 程序 的 这 个 状态 。 下面， 我 们 就 来 体验 一 下 这 些 History API， 请 
在 任意 页 面 下 打开 控制 台 ， 并 输入 以 下 代码 : 
> history.pushState({a: 1}, "", "hello"); 


> history.pushState({b: 2}, "", "hello-you-too"); 

> history.state; 

请 注意 ， 上 面 的 URL 虽 然 被 更 改 了 ， 但 页 面 本 身 并 没有 变化 。 接 
下 来 ， 您 可 以 在 浏览 絮 中 壬 试 厦 按 一 下 “后 退 " 和 “前 进 ” 按 钮 ， 并 再 次 查 
看 一 下 history.state 。 


7.3.6 window.frames 


window.frames 属性 是 当前 页 面 中 所 有 框架 的 集合 。 要 注意 的 是 ， 
这 里 并 没有 对 frame 和 iframe (内 联 框 架 ) 做 出 区 分 。 而 且 ， 无 论 当前 
页 面 中 是 否 存在 框架 ， window.frames 属 性 总 是 存在 的 ， 并 总 是 指 癌 
window 对 象 本 号 。 


> window.frames === window，; 


true 

假设 我 们 的 页 面 中 有 一 个 iframe 元 素 : 

<iframe name="myframe" src="hello.html" /> 

我 们 可 以 通过 检查 其 length 属 性 来 了 解 当前 页 面 中 是 否 存在 frame 元 


素 : 

> frames.length; 

1 

frames 中 的 每 个 元 素 都 包 合 了 一 个 页 面 ， 都 有 各 目的 window 全 局 
对 象 。 


如 果 想 访问 iframe 元 素 的 window 对 象 ， 可 以 选择 下 面 方式 中 的 任何 
一 种 : 


> window.frames[0j]; 

> window.frames[0].window; 

> window frames[0].window.frames; 

> frames[0].window:; 

> frames[0]; 

通过 父 级 页 面 ， 我 们 可 以 访问 子 frame 元 素 的 属性 。 例 如 ， 您 可 以 
用 以 下 方式 来 实现 frame 元 素 的 重 载 : 

> frames[0].window.location.reload(); 

同样 的 ， 我 们 也 可 以 通过 子 元 素来 访问 父 级 页 面 : 


> frames[0].parent === window; 


true 
另外 ， 通 过 一 个 叫做 top 的 属性 ， 我 们 可 以 访问 到 当前 最 顶层 页 面 
( 即 包含 所 有 其 他 frame 元 素 的 页 面 ) 中 的 任何 frame 元 素 : 


> window.frames[0].window.top === window; 

true 

> window.frames[0].window.top === window.top; 

true 

> window.frames[0].window.top === top; 

true 

除 此 之 外 还 有 一 个 self 属 性 ， 它 的 作用 与 window 基 本 相同 。 
> self === window:; 

true 


> frames[0].self == frames[0].window:; 


true 


如 果 frame 元 素 拥 有 name 必 性， 我 们 天 可 以 丢 开 索引 ， 而 通过 name 
属性 的 值 来 访问 该 frame。 


> window.frames[myframe'] === window.frames[0j]; 


true 
或 者 ， 你 也 可 以 采用 以 下 代码 : 
> frames.myframe === windows.frames[0]; 


true 
7.3.7 window.screen 


screen 属 性 所 提供 的 是 浏览 器 以 外 的 环境 信息 。 例 如 ， 
screen.colorDep 也 属性 所 包含 的 是 当前 显示 器 的 色 位 (表示 的 是 颜色 质 
量 ) 。 这 对 于 某 些 统计 化 操作 来 说 ， 会 非常 有 用 。 

> window.screen.colorDepth; 
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另外 ， 我 们 还 可 以 查看 当前 屏幕 的 实际 状态 《如 分 辨 率 ) : 

> Screen.width; 

1440 

> screen.avail Width:; 

1440 

> screen.height; 

900 

> Screen.availHeight; 

847 

其 中 ，height 和 availHeight 之 间 的 不 同 之 处 在 于 ，height 指 的 是 总 分 
辨 率 ， 而 availHeight 指 的 是 除去 操作 系统 染 单 (例如 Windows 操 作 系 统 
的 任务 栏 ， 以 外 的 子 区 域 。 同 样 的 ，availWidth 的 情况 也 是 如 此 。 

再 比如 以 下 属性 : 

> window.devicePixelRatio; 

1 


它 是 设备 物理 像素 与 设备 独立 像素 (device-independent pixels， 
dip) 的 比例 。 例 如 ， 在 Retina 屏 幕 的 iPhone 上 ， 这 个 值 为 2。 


7.3.8 window.open()/close() 


在 上 面 我 们 探索 了 一 些 windows 对 象 中 最 常见 的 跨 浏览 器 属性 。 
接 下 来 ， 我 们 再 看 一 些 方法 。 其 中 ，open0 是 一 个 可 以 让 我 们 打开 新 浏 
览 右 窗口 的 方法 〈“ 即 弹出 窗 ) 。 如 今 ， 多 数 浏览 帮 的 策略 及 其 用 户 设 
置 都 会 阻止 浏览 右 的 弹出 窗 (以 防止 这 种 技术 的 商业 化 滥用 ) ， 但 在 
一 般 情 况 下 ， 如 果 该 操作 是 由 用 户 发 起 的 话 ， 我 们 就 应 该 允许 新 窗口 
弹出 。 否 则 ， 如 果 我 们 想 在 页 面 加 载 时 就 打开 一 个 弹出 窗 有 的话， 多 数 
情况 下 束 会 被 阻止 ， 因 为 该 操作 并 不 是 用 户 明 确 发 起 的 。 
window.open() 方 法 主要 接受 以 下 参数 。 
要 载 入 新 窗口 的 URL 。 
狐 窗 口 的 名 字 ， 用 于 新 窗 体 form 标 签 的 target 属性 值 。 
以 逗号 分 割 的 功能 性 列表 ， 包 括 : 
resizable: 尺寸 的 可 调整 性 ， 即 是 否 介 许 用 户 调整 新 窗口 大 小 。 
width，height: 弹出 窗 的 长 与 宽 。 
status: 状态 ， 用 于 设置 状态 栏 的 可 见 性 。 
而 window.open() 方 法 会 返回 一 个 新 建 浏览 器 实例 的 window 对 象 引 
用 ， 例 如 : 
var win = window.open(http:/www.packtpub.com'，packt, width=300， 
height=300,resizable=yes'); 
如 您 所 见 ，win 指 同 的 束 是 该 弹出 窗 的 window 对 象 。 我 们 可 以 通过 
分 得 win 是 否 为 falsy 值 来 判断 弹出 窗 是 人 否 被 屏蔽 了 。 
win.close() 方 法 则 是 用 来 关闭 新 窗口 的 。 


总 而 言 之 ， 在 设置 天 于 打开 窗口 这 方面 功能 的 可 访问 性 和 可 用 性 
时 ， 您 最 好 要 有 充足 的 理由 。 如 有 果 我 们 上 自己 都 不 想 被 网 站 中 弹出 的 窗 
口 骚 扰 的 话 ， 为 什么 还 要 将 其 强加 给 用 户 呢 ?尽管 这 种 做 法 有 它 合 理 
的 地 方 ， 例 如 填 表 时 为 用 户 提供 帮助 信息 等 ， 但 我 们 完全 可 以 用 其 他 
方法 代 瑟 ， 例 如 通过 在 页 面 中 捅 入 浮动 的 <div> 标 签 方法 来 解决 这 一 问 


题 。 
7.3.9 window.moveTo() 、 window.resizeTo() 


继续 刚才 所 谈 的 “ 仪 俩 ”， 实 际 上 ， 我 们 还 有 许多 方法 可 以 控制 页 
面 ， 只 需要 用 户 的 浏览 器 设置 允许 我 们 这 么 做 : 

调用 window.moveTo(100, 100) 将 当前 浏览 融 窗 口 移动 到 屏幕 坐标 x 
=100，y= 100 的 位 置 ( 指 的 是 窗口 相对 屏幕 左上 角 的 坐标 ) 。 

调用 window.moveBy(10, -10) 将 窗口 的 当前 位 置 右 移 10 个 像素 ， 
并 同时 上 移 10 个 像素 。 

调用 与 前 面 move 类 方法 相似 的 window.resizeTo(x，y) 和 
window.resizeBy (x, y)， 只 不 过 这 里 做 的 不 是 移动 位 置 ， 而 古 调整 窗口 
的 大 小 。 

但 必须 再 次 强调 一 届 ， 我 们 并 不 建议 读者 使 用 这 些 方法 来 解决 问 


题 。 


在 第 2 章 : 基本 数据 类 型 、 数 组 、 循 环 及 条 件 表 达 式 中 ， 我 们 已 经 
接触 了 alert0 函 数 。 现 在 我 们 又 知道 了 该 画 数 只 是 全 局 对 象 的 一 个 方 
法 。 也 就 是 说 ，alert(CWatch out!) 和 window.alert("Watch out! 这 两 个 函数 
是 完全 相同 的 。 


alert() 并 不 属于 ECMAScript， 而 是 一 个 BOM 方 法 。 除 此 之 外 ， 
BOM 中 还 有 两 个 方法 可 以 让 我 们 以 系统 消息 的 形式 与 用 户 进 行 区 互 ， 
它们 分 别 是 

confirm() 方 法 ， 它 为 用 户 提 供 了 两 个 选项 一 一 OK 与 Cancel; 

prompt() 方 法 ， 它 为 用 户 提 供 了 一 定 的 文本 输入 功能 。 

下 面 来 看 看 它们 是 如 何 工作 的 : 

> var answer = confirm('Are you cool?'); 

> answer; 

如 您 所 见 ， 这 段 代 码 会 弹出 类 似 这 样 的 窗口 (具体 的 外 观 还 要 取 
决 于 浏览 器 和 操作 系统 ) ， 如 图 7-2 所 示 。 

在 这 里 ， 我 们 将 会 注意 到 两 点 : 


在 我 们 关闭 该 窗口 之 前 ， 控 制 台 将 会 停止 接受 任何 输入 ， 这 意味 
着 JavaScript 代码 在 此 处 会 暂停 执行 ， 以 等 得 用 户 的 回复 ; 


The page at www.phpied.com says: 


Are you cool? 


| Cancel | | OK | 


图 7-2 
如 宁 单 击 的 是 “OK”， 方 法 将 会 返回 tue， 而 如 采 单 击 的 是 “Cancel” 
或 者 按 x 图 标 (也 可 以 按 ESC 键 ) 关闭 该 窗口 则 会 返回 false。 
这 样 一 来 ， 我 们 束 可 以 根据 用 户 的 回答 来 设 吓 了 ， 例 如 : 
if (confirm('Are you sure you want to delete this item?')) { 
// delete 


} else { 
// abort 

} 

当然 ， 我 们 还 必须 确保 在 JavaScript 被 禁用 时 或 是 搜索 引擎 访问 页 
面 时 能 提供 些 备用 方案 。 

window.prompt0 方 法 呈现 给 用 户 的 是 一 个 用 于 输入 文本 的 对 话 
框 ， 例 如 : 

> var answer = prompt( And your name was?'); 


> answer; 


其 对 话 框 如 图 7-3 所 示 (在 Chrome，MacOS 环 境 中 ) : 


The page at file:/ /localhost/ says: 
© And your name was? 


其 回复 值 可 能 会 出 现 以 下 情况 : 
如 果 我 们 直接 单 击 Cancel 或 者 x 图 标 以 及 按 ESC 键 退出， 对话 框 将 


如 果 我 们 没有 输入 任何 东西 丈 直 接 单 击 OK 或 按 回 车 ， 对 话 框 将 
会 返回 ( 即 空 字符 串 ) : 

如 果 我 们 输入 了 一 些 内 容 之 后 单 击 OK (或 按 回 车 ) 。 对 话 框 就 会 
返回 相应 的 文本 字符 串 。 


另外 ， 该 男 数 还 可 以 接受 第 二 个 字符 串 参 数 ， 主 要 用 做 输入 框 中 
的 默认 值 。 


7.3.11 window.setTimeout() 、 window.setInterval() 


setTimeout() 、setInterval() 这 两 个 方法 主要 人 被 用 于 某 些 代码 片段 的 
执行 调度 ， 其 中 setTimeoutO 用 于 在 指定 的 毫秒 数 后 执行 某 段 既 定 代 
码 ， 而 setInterval0 则 用 于 每 隔 一 段 训 秒 数 重 新 执行 这 段 代 码 。 

下 面 来 看 一 个 在 2 秒 〈 即 2000 毫 秒 ) 之 后 弹出 alert 窗 口 示 例 : 

> function boo(){alert(Boo!');} 

> setTimeout(boo, 2000); 

4 

如 您 所 见 ， 该 函数 返回 了 一 个 整数 〈 在 这 个 例子 中 为 4) ， 该 整数 
是 该 计时 妖 的 ID。 我 们 可 以 用 这 个 ID 调 用 clearTimeout0 方 法 来 取消 当 
前 的 计时 絮 。 在 下 面 的 示例 中 ， 如 果 我 们 的 动作 够 快 ， 在 2 秒 之 前 取消 
了 计时 絮 ，alert 笑 口 束 永远 不 会 都 出 现 了 。 


> var id = setTimeout(boo, 2000); 


> clearTimeout(id); 

现在 ， 让 我 们 对 boo0 做 些 改动 ， 换 成 一 种 不 那么 弘 扰 的 方式 : 

> function boo() {fconsole.log(boo7;}; 

接着 ， 我 们 在 setInterval0 中 调用 boo0， 每 2 秒 执行 一 次 ， 直 到 我 
们 调用 clearInterval0) 函 数 取 消 相 关 的 执行 调度 为 止 。 


> var id = setInterval(boo, 2000); 


boo 

boo 

> ClearInterval(id); 

要 注意 的 是 ， 上 面 两 个 函数 的 首 参 数 都 可 以 接受 一 个 指向 回调 范 
数 的 指针 。 同 时 ， 这 两 个 函数 也 能 接受 可 以 被 eval0 函 数 执行 的 字符 
串 。 但 eval0 的 危险 之 处 是 众所周知 的 ， 因 此 它 应 该 尽量 被 避免 使 用 。 
那么 ， 我 们 怎么 传递 参数 给 该 函数 呢 ? 在 这 种 情况 下 ， 最 好 还 是 将 相 
天 的 函数 调用 封 猴 成 另 一 个 函数 。 

例如 ， 下 面 代 码 在 语法 上 是 正确 的 ， 但 做 法 并 不 值得 推荐 : 

// bad idea 

var id = setInterval("alert(boo, boo')", 2000); 

显然 我 们 还 有 更 合 适 的 选择 : 


var id = setInterval( 


function(){ 
alert('boo, boo'); 

je 

2000 

); 

请 注意 ， 虽 然 我 们 有 时 意图 让 某 个 函数 在 数 毫 秒 后 即 执行 ， 但 
JavaScript 并 不 保证 该 函数 能 恰好 在 那个 时 候 被 执行 。 其 原因 之 一 在 于 
大 多 数 浏 览 右 并 没有 精确 到 襄 秒 的 触发 事件 。 例 如 ， 如 果 我 们 设 定 某 
个 函数 在 3 毫秒 以 后 执行 ， 那 么 在 老 版 本 的 正中， 该 玫 数 至 少 会 在 15 宣 
秒 以 后 才 执行 。 在 现代 浏览 器 中 ， 这 个 数值 会 短 一 点 ， 但 时 间 差 一 般 
不 会 在 1 毫秒 以 内 。 另 一 个 原因 在 于 ， 浏 览 器 会 维护 维护 一 个 执行 队 
列 。100 毫秒 的 计时 器 只 是 意味 着 在 100 襄 秒 后 将 指定 代码 放 入 执行 队 
列 ， 但 如 果 队 列 中 仍 有 还 在 执行 的 代码 ， 那 么 刚刚 放 入 的 代码 束 要 等 


待 直 到 它们 执行 结束 ， 从 而 虽然 我 们 设 定 了 100 训 秒 的 代码 执行 延迟 时 
间 ， 这 段 代 码 很 可 能 到 120 毫 秒 以 后 才 会 被 执行 。 

最 近 很 多 浏 贤 姨 实现 了 requestAnimatioinFrame() 芳 数 。 该 辑 数 更 
适合 精确 延 时 ， 因 为 通过 该 函数 设 定 的 计时 器 ， 即 使 浏览 右 没 有 资 
产 ， 也 会 在 那个 时 刻 调用 。 请 在 控制 台 下 笑 试 如 下 代码 : 

function animateMe() { 

webkitRequestAnimationFrame(function(){ 
console.log(new Date()); 
animate Mel(); 
}); 
} 


animateMe(); 
7.3.12 window.document 


window.document 是 一 个 BOM 对 象 ， 表 示 的 是 当前 所 载 入 的 文档 

( 即 页面 ) 。 但 它 的 方法 和 属性 同时 也 属于 DOM 对 象 所 涵盖 的 范围 。 

现在 ， 让 我 们 深 吸 一 口气 放松 一 下 《或 者 你 可 以 去 试 试 本 章 最 后 的 
BOM 练 习 ) ， 随 后 深入 DOM 领 域 中 去 吧 ! 


7.4DOM 


位 而 言 之 ，DOM (Document Object Model， 即 文档 对 象 模 型 ) 是 

一 种 将 XML 或 HTML 文 档 解 析 成 树 形 节 点 的 方法 。 通 过 DOM 的 方法 
与 属性 ， 我 们 就 可 以 访问 到 页 面 中 的 任何 元 素 ， 并 进行 元 素 的 修改 、 
删除 以 及 添加 等 操作 。 同 时 ，DOM 也 是 一 套 语 言 独立 的 API 
(Application Programming Interface， 即 应 用 程序 接口 ) 体系 ， 它 不 仅 


在 JavaScript 中 有 相关 的 实现 ， 在 其 他 语言 中 也 有 实现 。 例 如 ， 我 们 可 
以 在 服务 器 端 用 PHP 的 DOM 实现 (http://php.net/dom) 来 产生 相关 的 
页 面 。 
下 面 我 们 来 看 一 个 具体 的 HIML 页 面 : 
<IDOCTYPE html> 
<html> 
<head> 
<title>My page</title> 
</head> 
<body> 
<p class="opener">first paragraph</p> 
<p><em>second</em> paragraph</p> 
<p id="closer">final</p> 
<!-- and that's about it --> 
</body> 
</html> 
我 们 来 看 页 面 中 的 第 二 段 ( <p><em>second</em> 
paragraph</p>) ， 首 先 看 到 的 是 <p> 标 签 ， 它 包含 在 <body> 标 签 中 。 
此 ， 我 们 可 以 说 <body> 是 <p> 的 父 节 点 ， 而 <p> 是 一 个 于 节点 。 同 理 ， 
页 面 中 的 第 一 段 和 第 三 段 也 都 是 <body> 的 子 节 点 ， 同 时 是 第 二 段 的 兄 
第 万 点 。 而 <em> 标 俭 又 是 第 二 个 <p> 标 签 的 子 节 点 ， 也 承 是 说 <p> 征 它 
的 父 节 护 。 如 果 我 们 将 这 些 父子 关系 图 形 化 ， 束 会 看 到 一 个 树 状 族谱 
( 见 图 7-4) ， 我 们 将 其 称 之 为 DOM 树 。 
如 图 7-4， 在 webkit 控 制 台 中 ， 单 击 Elements 选 项 卡 即 可 打开 此 弄 
面 。 


first paragraph 
second paragraph 


final 
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T<head> 
< 七 ItLe>My page</title> 
</head> 
了 <body> 
<p class="0pener">first paragraph</p> 
<p> 
<em>second</ em> 
”paragraph” 
</ p> 
<p id="closer">final</p> 
<!-— and that's about it 一 一 > 
</body> 
</html> 


图 7-4 
在 图 中 可 以 看 到 ， 页 面 中 所 有 的 标签 都 可 以 以 树 节点 的 形式 显示 
出 来 。<em> 标 签 内 的 文字 (second) 也 是 一 种 节点 ， 这 种 节点 称 为 文 
本 蔬 点 。 至 日 竺 也 是 文本 和 点 。 此 外 ，HTML 中 的 注释 同样 被 认为 是 一 
个 树 上 节点 ， 在 这 里 ，<!--and that's about it --> 是 一 个 注释 节点 。 


在 DOM 树 中 ， 每 个 节点 都 是 一 个 对 象 ， 右 边 的 Properties 选 项 卡 列 
出 了 该 对 象 的 所 有 属性 ， 以 及 该 对 象 能 够 使 用 的 所 有 方法 ， 它 们 以 继 
承 链 的 顺序 排列 ， 如 图 7-5 所 示 。 


I t ‘ 一 
[Elements | 加 | Resources © Network 攻 Sources (© Timeline CO Profiles YA Audits /Console 
pb Computed Style 


v<html> > Styles 
v<head> - 
<title>My page</title> pb Metrics 
</head> Vv Properties 
了 <body | > <p> 
<p class="0opener">first paragraph</p> 
了 <p> = HTMLParagraphE lement 
<em>second</em> pb HTMLELement 
dd pb Element 
<p id="closer">final</p> Pp Node 
<!-— and that's about it --> * Object 
</body> - 
</html> pb DOM Breakpoints 


pb Event Listeners 


图 7-5 
我 们 也 能 在 选项 卡 中 找到 创建 每 个 DOM 对 象 时 所 使 用 的 构造 器 孙 
数 。 当 然 ， 在 日 常 开 发 中 很 少 用 到 这 个 功能 ， 然 而 这 些 冷 知识 也 很 有 
趣 : 例如 ，<p> 标 签 所 代表 的 DOM 对 象 实 际 上 是 由 
HTMLParagraphElement() 构造 器 创建 的 ， 而 <head> 则 对 应 于 
HTMLHeadElement() 等 。 不 过 ， 虽 然 我 们 能 借 此 知道 这 些 DOM 对 象 内 
部 构造 器 的 名 字 ， 但 我 们 并 不 能 直接 使 用 这 些 构造 器 。 


7.4.1 Core DOM 与 HIML DOM 


在 接触 更 有 实际 意义 的 示例 之 前 ， 我 们 还 需要 最 后 做 一 次 概念 性 
的 梳理 。 现 在 我 们 已 经 知道 ， DOM 既 能 解析 XML 文 档 ， 也 能 解析 
HITML 文 档 。 实 际 上 ，HIML 文 档 本 号 也 可 以 被 当做 一 种 特殊 的 XML 
文档 。 因 此 ， 我 们 可 以 将 DOM Level 1 中 用 于 解析 所 有 XML 文档 的 那 
部 分 称 之 为 Core DOM。 而 将 在 Core DOM 基 础 上 进行 扩展 的 那 部 分 称 


之 为 HTML DOM。 当 然 ，HTML DOM 并 不 适用 于 所 有 的 XML 文档 ， 
它 只 适用 于 HTML 文 档 。 下 面 ， 就 让 我 们 来 看 一 些 属于 Core DOM 和 
HTML DOM 的 构造 絮 示 例 ， 如 表 7-1 所 示 。 


Node 


Document 


Node 


表 7-1 
Core 或 HTML 


Core 


Core 


注释 说 明 
DOM 树 上 所 有 的 节点 都 属于 Node 


Document 对 象 ， 主 要 用 于 表示 XML 文 
档 项 目 


构造 器 父 级 构造 器 注释 说 明 
即 window.document 或 其 简写 
HTMLDocument Document HTML document 所 指 回 的 对 象 。 是 前 一 对 象 的 
HTML 定制 版 ， 应 用 十 分 广泛 
ei 和 在 源 文档 中 ， 每 一 个 标签 都 是 一 个 元 素 ， 
所 以 ， ee ee 我 < 
HTMLElement Element HTML 一 个 通用 性 构造 器 ， 所 有 与 HTML 
ee 


HTMLBodyElement | HTMLElement HTML 用 于 表示 <body> 的 标签 的 元 素 


起 一 -个 Tr- + 
HTMLLinkElement | HTMLElement | HTML 代表 Vs 元 素 ( 即 <a href=".. 
></a> 标 签 ) 


其 他 构造 器 剩 下 所 有 的 HTML 页面 元 素 


即 插入 在 标签 中 的 文本 节点 。 例 如 在 
Text CharacterData | Core <em>second</em> 这 人 句 代 码 中 ,就 包含 了 
EM 元 素 节 点 和 值 为 “second” 的 文本 节点 


Comment CharacterData 即 <!--HTML 注释 --> 


用 于 代表 各 标签 中 的 属性 ， 例 如 在 代码 
Attr Node Core <p id="closer"> 中 ， 属 性 id 也 是 一 
个 DOM 对 象 ， 由 Attr () 负责 创建 
Wd or 即 节点 列表 ， 是 一 个 用 于 存储 对 象 ， 拥 有 
自身 length 属性 的 类 数组 对 象 


其 功能 与 上 一 个 对 象 相 同 。 不 同 之 处 在 
NamedNodeMap Core 于 , 该 对 象 中 的 元 素 是 通过 对 象 名 而 不 是 
数字 索引 来 访问 的 
i HTML 其 功能 也 与 前 两 个 对 象 类 似 ， 但 它 是 为 
HTML 特性 量 身 定制 的 


当然 ， 这 里 并 没有 列 出 所 有 的 Core DOM 和 HTML DOM 对 象 ， 如 
果 读 者 想 获得 完整 列表 ， 可 以 参考 链接 http:/www.w3.org/TR/DOML- 
Level-1/ 中 的 内 容 。 

现在 ， 我 们 已 经 对 DOM 理论 背后 的 实用 性 有 了 更 深入 的 理解 。 在 
接 下 来 的 革 市 中 ， 我 们 将 继续 学 习 : 


访问 DOM 节点 
修改 DOM 节点 
创建 新 的 DOM 节点 
移 除 DOM 节点 


7.4.2 DOM 节 点 的 访 辣 


在 我 们 进行 表单 验证 或 图 片 奉 换 这 样 的 操作 之 前 ， 首 移 需 要 访问 
到 这 些 要 检查 或 修改 的 元 素 。 和 下 运 的 是 ， 访 问 这 些 元 素 的 方法 有 很 
多 ， 我 们 既 可 以 使 用 DOM 树 的 方式 进行 抽 历 ， 也 可 以 使 用 快捷 方式 进 
行 导 航 。 

当然 了 ， 我 们 最 好 还 是 亲自 将 这 些 新 对 象 与 方法 都 体验 一 过 。 
此 接 下 来 ， 我 们 的 示例 将 始终 围绕 DOM 一 和 开头 所 展示 的 那个 简单 文 
档 来 展开 。 需 要 的 话 ， 读 者 也 可 以 直接 通过 访问 
http://www.phpied.com/files/jsoop/ch7.html 来 获取 该 页 面 。 现 在 ， 让 我 们 
打开 控制 台 ， 开 始 吧 。 

7.4.2.1 文档 节点 

document 对 象 给 定 的 就 是 我 们 当前 所 访问 的 文档 。 为 了 对 该 对 象 
进行 进一步 探索 ， 我 们 需要 再 次 用 到 控制 台 的 备 起 功能 。 下 面 ， 在 控 
制 台 中 输入 console.dir(document)， 然 后 单 击 展开 其 返回 结果 〈 见 图 7- 
6) 。 


个 GC! | | www.phpied.com /files/jsoop/ch7.html 


first paragraph 
second paragraph 


final 


、 r= . b 人 = | 一 
Is Elements 可 | Resources © Network 和 Sources Timetine CO Profiles audits | console | 


> console.dir(document) 
Vv#document 

URL: "http://www.phpied.com/files/jsoop/ch7.html" 

bactiveElement: <body> 
alinkColor: "" 

pall: HTMLALICollection[8] 

pb anchors: HTMLCollection[8] 

pb applets: HTMLCoLLection[9] 
attributes: null 
baseURI: "http://www.phpied.com/files/jsoop/ch7.html" 
bgColor: ”” 

> body: <body> 
characterSet: "IS0-8859-1" 
charset: "IS0-8859-1" 

bp childNodes: NodeList[2] 


图 7-6 

另外 ， 我 们 也 可 以 通过 控制 台 Elements 选 项 卡 来 浏览 document 对 象 
的 所 有 DOM 属 性 与 方法 ， 如 图 7-7 所 示 。 

如 您 所 见 ， 图 中 所 有 的 节点 (包括 文档 类 节点 、 文 本 类 节点 、 元 
素 类 节点 以 及 属性 类 节点 ) 都 拥有 属于 自己 的 nodeType、nodeName 和 
nodeValue 属 性 。 例 如 : 

> document.nodeType; 
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入 他 | www.phpied.com/files/jsoop/ch7.html 


first paragraph 
second paragraph 


final 


s 6 ] 
| Bal Elements | | 画 而 | Resources © Network 攻 | Sources CY Timeline CP Profiles CA audits Lg Console 


| Computed Style 
vY<html> = Styles 


p <head>..</head> 
bp <body>..</body> > Metrics 
</html> vProperties 


Vv#document 
URL: "http://www.phpied.com/fild 

pb activeElement: <body> 
alinkColor: "" 

Pall: HTMLALLCoLLection[8] 

* anchors: HTMLColLection[8] 

bk applets: HTMLCoLLection[g] 
attributes: null 
baseURI: "http://www.phpied.com 
BCetLoFz ™™ 

Pw body: <body> 
characterSet: "IS0-8859-1" 
charset: "IS0-8859-1" 

bE childNodes: NodeList[2] 
compatMode: "CSSiCompat" 


图 7-7 
在 DOM 中 ， 市 点 类 型 有 12 种 ， 每 种 类 型 分 别 用 一 个 整数 来 表 
示 。 正 如 您 所 见 ，document 节 点 的 类 型 是 9， 其 他 最 常用 的 节点 类 型 还 
有 1 (元 素 ) 、2 (属性 ) 、3 (文本 ) 。 
另外 ， 这 些 节 点 也 都 有 各 自 的 名 字 。 对 于 HTML 标 签 来 说 ， CR 
般 就 是 具体 标签 的 名 字 〈 即 tagName 属 性 ) 。 而 对 于 文本 节点 来 说 ， 
名 字 就 是 #text。 那 么 ，document 节 点 呢 ? 我 们 可 以 来 看 一 下 : 


> document.nodeName; 


"#document" 


同时 节点 也 都 有 各 目的 节点 值 ， 例 如 ， 文 丁 点 的 值 束 是 它 的 实 
际 文本 。 但 document 节 点 中 却 不 包含 任何 值 : 


> document.nodeValue; 


null 

7.4.2.2 documentElement 

现在 ， 让 我 们 将 注意 力 转移 到 树 结构 上 来 。 通 常 来 说 ， 每 个 XML 
Re 于 封 儿 文档 中 其 他 内 容 的 根 证 点 。 具 体 到 HTML 文 
档 上 ， 这 个 根 节 点 就 是 <html> 标 签 ， 我们 可 以 通过 document 对 象 的 
documentElement 属 性 来 访问 它 。 

> document.documentElement: 

<html>...</html> 

该 属性 的 nodeType 值 为 1 ( 即 这 是 一 个 元 素 类 节点 ) : 

> document.documentElement.nodeType; 

1 

对 于 元 素 类 节点 来 说 ， 其 nodeName 和 tagName 属 性 就 等 于 该 标签 
本 身 的 名 字 : 


> document.documentElement.nodeName; 


"HTML" 

> document.documentElement.tagName; 

"HTML" 

7.4.2.3 子 节 点 

如 果 要 检查 一 个 节操 是 否 存 在 子 方 点， 我 们 可 以 调用 该 节 扣 的 
hasChildNodes() 方 法 : 


> document.documentElement.hasChildNodes(); 

true 

HTML 元 闵 有 三 个 子 世 点 一 一 即 head 元 素 、body 元 素 ， 以 及 两 者 
之 间 的 空白 (大 多 数 浏 览 各 都 会 将 空 日 算 在 内 ， Ce 
如 此 ) 。 我 们 可 以 通过 该 元 素 中 的 childNodes 这 个 类 似 于 数组 的 集 
访问 它们 。 


> document.documentElement.childNodes.length; 


3 

> document.documentElement.childNodes[0]; 

<head>...</head> 

> document.documentElement.childNodes[1]; 

#text 

> document.documentElement.childNodes[21]; 

<body>...</body> 

任何 子玉 点 都 可 以 通过 其 目 号 的 parentNode 属 性 来 访问 它 的 父 届 


2IT 
3 


> document.documentElement.childNodes[11].parentNode; 
<html>...</html> 

下 面 ， 我 们 将 body 元 素 的 引用 赋值 给 一 个 变量 : 

> var bd = document.documentElement.childNodes[2]; 


现在 来 看 看 该 元 素 中 有 几 个 子 方太 : 


> bd.childNodes.length; 
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作为 复习 ， 我 们 再 来 看 看 文档 的 body 部 分 : 
<body> 


<p class="opener">first paragraph</p> 
<p><em>second</em> paragraph</p> 
<p id="closer">final</p> 
<!-- and that's about it --> 
</body> 
那么 ， 为 什么 body 有 9 个 节点 呢 ? 让 我 们 来 看 看 ，3 个 段落 加 1 个 注 
释 是 4 个 节点 。 然 后 ， 这 4 个 节点 之 间 的 空 晶 处 有 3 个 文本 类 市 点 。 这 样 
一 来 ， 目 前 为 止 就 有 7 个 了 。 男 外 ，body 与 首 个 p 标 签 之 间 有 一 个 空白 


处 ， 那 是 第 8 个 ， 而 comment 元 于 与 </body> 标 签 之 间 也 有 一 个 空白 处 ， 
那 义 是 一 个 文本 类 市 点 。 一 共 是 9 个 子 节 点 。 

7.4.2.4 属性 

由 于 body 的 第 一 个 子 节 点 是 个 空 日 ， 因 此 ， 第 二 个 子 节 点 (索引 
为 1) 是 实际 上 的 第 一 个 段落 : 

> bd.childNodes[1]:; 

<p class="opener">first paragraph</p> 

我 们 可 以 通过 元 素 的 hasAttributes() 方 法 来 检查 该 元 素 中 是 否 存 在 
属性 : 
> bd.childNodes[1].hasAttributes(); 


true 


那么 ， 该 元 素 中 有 几 个 属性 呢 ? 当前 示例 中 只 有 一 个 ， 即 class 属 


性 。 
> bd.childNodes[1j.attributes.Jength; 
1 
我 们 可 以 通过 索引 值 ， 或 属性 名 来 访问 一 个 属性 。 除 此 之 外 ， 我 
们 也 可 以 调用 getAttribute() 方 法 来 获取 相关 的 属性 值 。 
> bd.childNodes[11.attributes[0].nodeName: 
"class" 
> bd.childNodes[1].attributes[0].nodeValue; 
"opener" 
> bd.childNodes[11.attributes['class'].nodeValue:; 
"opener" 
> bd.childNodes[1].getAttribute('class'); 
"opener" 
7.4.2.5 访问 标签 中 的 内 容 
下 面 ， 我 们 以 第 一 段 为 例 : 


> bd.childNodes[1].nodeName; 

"pr" 

我 们 可 以 通过 该 元 素 的 textContent 属 性 来 获取 段落 中 的 文本 内 容 。 
如 果 我 们 使 用 的 是 不 支持 textContent 属 性 的 老式 IE 浏 览 器 ， 则 通过 男 一 
个 叫 innerText 的 属性 来 返回 相同 的 值 。 

> bd.childNodes[1].textContent; 

"first paragraph" 

另外 ， 我 们 也 可 以 通过 innerHTML 属 性 来 解决 上 述 问 题 。 尺 管 该 
属性 在 DOM 标准 中 相对 比较 年 轻 ， 但 几乎 所 有 的 主流 浏览 絮 对 它 提供 
了 支持 。 该 属性 可 返回 (或 设置 ， 指定 节点 中 的 HTML 代 码 。 因 此 ， 我 
们 也 会 看 到 该 属性 与 document 对 象 之 间 的 不 同 之 处 ， 后 者 返回 的 是 一 
个 可 追踪 DOM 和 点 树 ， 而 前 者 返回 的 只 是 标签 字符 果 而 已 。 但 由 于 
innnerHTML 使 用 极其 方便 ， 以 至 于 它 随处 可 见 。 

> bd.childNodes[1].innerHT™ML. 

"first paragraph" 

由 于 第 一 段落 中 只 有 文本 ， 所 以 它 的 innerHTML 值 和 textContent 

(及 正中 的 innerText) 完全 相同 。 但 到 了 第 二 段落 中 ， 由 于 其 中 还 包 

含 了 em 代码 ， 两 者 的 不 同 束 会 显现 出 来 : 

> bd.childNodes[3].innerHTM™ML.; 

"<em>second</em> paragraph" 

> bd.childNodes[3].textContent; 

"second paragraph" 

除 此 之 外 ， 获 得 第 一 段落 的 文本 内 容 还 有 一 种 方式 ， 即 访问 p 市 所 
内 的 文本 市 点 ， 读 取 它 的 nodeValue 属 性 : 

> bd.childNodes[1].childNodes.length; 

1 

> bd.childNodes[1].childNodes[0].nodeName; 


"#text" 

> bd.childNodes[1].childNodes[0].nodeValue; 

"first paragraph" 

7.4.2.6 DOM 访问 的 快捷 方法 

通过 childNodes 、parentNode、nodeName、nodeValue 以 及 attributes 
这 些 属性 ， 我 们 可 以 在 树 结构 的 上 下 层 之 间 实 现 自由 导航 ， 并 人 处理 相 
天 的 文档 操作 。 但 别 瑟 了 ， 空 日 处 也 会 成 为 一 个 文本 类 节点 ， 这 件 事 
会 给 这 种 DOM 工 作 方 式 带 来 一 些 不 稳定 性 出 。 因 为 在 这 种 情况 下 ， 只 
要 页 面 发 生 一 些 细微 变化 ， 我 们 的 脚本 或 许 就 不 能 正 弟 工作 了 “。 另 
外 ， 如 果 我 们 访问 的 树 节 点 深度 更 深 一 些 ， 我 们 或 许 就 要 为 此 写 更 多 
的 代码 。 这 就 是 为 什么 我 们 需要 一 些 快捷 方法 来 解决 问题 。 这 些 方法 
分 别 是 getElementsByTagName() 、 getElementsByName() 和 
getElementByld() ° 

getElementsByTagName() 以 标签 名 〈 即 元 素 节 点 的 名 字 ) 为 参数 ， 
返回 当前 HTML 页 面 中 所 有 匹配 该 标签 名 的 节点 集合 (一 个 类 似 于 数组 
的 对 象 ) 。 例 如 ， 以 下 例子 会 返回 所 有 p 标 签 的 总 数 : 

> document.getElementsByTagName('p').length; 
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列表 中 的 各 项 可 以 用 中 括号 法 或 item() 方 法 来 进行 索引 (从 0 开 
始 ) 访问 。 但 我 们 并 不 推荐 item() 方 法 ， 与 之 相 比 ， 中 括号 法 显然 更 具 
有 一 至 性， 输入 也 更 为 简短 : 

> document.getElementsBylTagName('p')[0j; 


<p class="opener" >first paragraph</p> 

> document.getElementsBylTagName('p').item(0); 

<p class="opener" >first paragraph</p> 

下 面 我 们 来 获取 第 一 个 p 元 素 中 的 内 容 : 

> document.getElementsByTagName('p')[0].innerHTML.; 


"first paragraph" 

获取 最 后 一 个 ( 即 第 三 个 ) p 元 素 的 内 容 : 

> document.getElementsByTIagName(P')[2]; 

<p id="closer">final</p> 

对 于 这 些 元 素 的 属性 ， 我 们 可 以 通过 attributes 集合 ， 或 者 上 面 所 
提 到 的 getAttribute(0) 方 法 来 进行 访问 。 但 我 们 还 可 以 使 用 一 种 更 为 简便 
的 方法 ， 即 在 运行 时 直接 将 属性 名 当做 元 素 对 象 的 属性 来 访问 。 例 
如 ， 如 采 想 获取 其 id 属性 的 值 ， 我 们 束 可 以 直接 将 id 当做 一 个 属性 。 

> document.getElementsBylTagName('p')[21.id; 

"closer" 

当然 ， 这 种 方法 对 于 第 一 段落 中 的 class 属性 不 起 作用 。 这 种 异常 
情况 的 原因 在 于 "class” 这 个 词 在 ECMAScript 中 被 设置 成 了 保留 字 。 对 
此 ， 我 们 只 需要 改 用 className 即 可 : 

> document.getElementsBylagName('p')[0].className; 


"opener" 

另外， 我 们 也 可 以 直接 调用 getElementsByTagName() 方 法 来 获取 页 
面 中 的 所 有 元 于 : 

> document.getElementsBylTagName(*').length; 
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由 于 在 IE7 之 前 的 版 本 中 ,，“*” 是 一 个 非法 的 标签 名 ， 所 以 在 这 里 我 
们 可 以 改 用 于 所 支持 的 集合 document.all 来 返回 页 面 中 的 所 有 元 素 ， 尽 
管 我 们 事实 上 很 少 会 用 到 这 类 方法 。 

在 上 面 介绍 的 快捷 方法 中 ， 还 有 一 个 getElementById() 方 法 。 这 可 
能 是 最 常用 的 元 素 访 问 方法 了 。 只 要 我 们 为 元 素 们 设 定 好 各 目的 ID， 
然后 束 能 轻松 地 访问 这 些 元 素 : 


> document.getElementByld('closer'); 


<p id="closer">final</p> 


现代 浏览 器 也 文 持 其 他 一 些 快捷 方法 ， 包 括 : 

i 通过 元 素 的 class 属性 寻找 元 素 。 

querySelector(): 通过 CSS 选 择 恬 的 方式 寻找 元 素 。 

与 前 一 个 方法 基本 相同 ， 但 上 一 个 方法 仅 返 回 
匹配 的 第 一 个 元 素 ， 这 个 方法 会 返回 所 有 匹配 的 元 素 。 

a ee 

关于 DOM 树 的 导航 操作 ，nextSibling 与 previousSibling 这 两 个 属性 
也 提供 了 一 些 便利 。 例 如 ， 如 有 果 我 们 获得 了 某 个 元 到 的 引用 : 


> var para = document.getElementByld('closer'); 


> para.nextSibling.; 
#text 
> para.previousSibling; 
#text 
> para.previousSibling.previousSibling; 
<p>...</p> 
> para.previousSibling.previousSibling.previousSibling.; 
#text 
> para.previousSibling.previousSibling.nextSibling.nextSibling; 
<p id="closer">final</p> 
对 于 body 元 素来 说 ， 以 下 是 一 些 第 用 的 快捷 方式 : 
> document.body; 
<body>...</body> 
> document.body.nextSibling; 
null 
> document.body.previousSibling; 


<head>...</head> 


另外 ，firstChildlastChild 这 两 个 属性 也 是 非常 有 用 的 。 其 中 ， 
firstChild 等 价 于 childNodes[0] ， 而 lastChild 则 等 价 于 
childNodes[childNodes.length - 1]。 
> document.body.firstChild; 
#text 
> document.body.lastChild; 
#text 
> document.body.lastChild.previousSibling; 
<!— and that's about it--> 


> document.body.lastChild.previousSibling.node Value; 


" and that's about it " 
下 面 ， 我 们 用 一 张 截图 来 详细 解析 一 下 body 与 这 三 个 段落 之 间 的 
族谱 关系 。 当 然 ， 为 了 简 音 起见， 我 们 在 图 7-8 中 省 略 了 所 有 因 空 白 处 
而 形成 的 文本 类 节点 。 


nodeType EE 四 


nodeName 
localName 
prefix 
namespaceURI 
nodeValue 
ownerDocument 
parentNode 
nextsibling 
previoussibling 
firstchild DocumentType nodeName=html nodeType=10 
parentNode=document 
由 lastchild html 
由 childNodes NodeList 0=DocumentType 1=htmi length=2 
attributes 
dir eb 
baseURI "http://ww .phpied.com/£files/jsoop/ch? .html" 
textContent null 


图 7-8 


7.4.2.8 遍历 DOM 
作为 本 节 的 小 结 ， 我 们 在 这 里 实现 一 个 函数 ， 该 函数 会 从 所 给 定 
的 节点 开始 ， 过 历 整 个 DOM 树 ; 
function walkDOM(n) { 
do { 
console.log(n); 
if (n.hasChildNodes()) { 
walkDOM(n.firstChild); 
} 
} while (n = n.nextSibling); 
} 
下 面 ， 我 们 可 以 来 测试 一 下 : 
> walkDOM(document.documentElement); 


> walkDOM(document.body); 


7.4.3 DOM 节 点 的 修改 


现在 ， 我 们 已 经 掌握 了 许多 访问 DOM 树 节 点 及 其 属性 的 方法 ， 理 
论 上 我 们 已 经 可 以 访问 DOM 树 的 任何 一 个 节点 。 下面 我 们 来 看 看 如 何 
对 这 些 节 点 进行 修改 。 

目 完 ， 我 们 将 指向 最 后 段落 的 指针 赋值 给 变量 my: 

> var my = document.getElementById(Ccloser ); 

接 下 来 ,我们 就 能 轻松 地 通过 修改 对 象 的 innerHTML 值 来 修改 段 
落 中 的 文本 : 

> my.innerHTML = ‘final!!!'; 


"final!!!" 


由 于 innerHTML 可 以 接受 一 个 HTML 代 码 的 字符 串 ， 所 以 我 们 也 可 
以 用 它 在 当前 的 DOM 树 中 再 新 建 一 个 em 节点 : 
> my.innerHTML = '<em>my</em> final'; 
"<em>my</em> final" 
这 样 一 来 。 新 的 em 闻 点 就 成 为 该 树 结构 的 一 部 分 
> my.firstChild,; 
<em>my</em> 
> my.firstChild.firstChild; 
"my" 
除 此 之 外 ， 我 们 还 可 以 通过 修改 既定 文本 类 下 点 的 nodevalue 属性 
来 实现 相关 的 文本 修改 ; 
> Imy.firstChild.firstChild.nodeValue = your'; 
"your" 
7.4.3.1 修改 样式 
很 多 情况 下 ， 我 们 需要 小 修改 的 并 非 一 个 节点 的 内 容 ， 而 是 样 
式 。 元 素 对 象 中 还 有 一 个 style 属 性 ， 这 是 一 个 用 来 反映 当前 CSS 样 式 的 
属性 。 例 如 ， 通 过 修改 某 段 落 的 style 属 性 ， 就 可 以 给 它 加 上 一 个 红色 
的 边框 : 
> my.style.border = "1px solid red'"; 
"1px solid red" 
另外 ， 在 JavaScript 命 名 规范 中 ，CSS 属 性 中 的 短线 ( 即 “-”) 是 不 
可 用 的 。 对 于 这 种 情况 ， 我 们 只 需要 直接 路 过 并 将 下 一 个 单词 的 首 字 
母 大 写 即 可 。 例 如 ，padding-top 可 以 写成 paddingTop、margin-left 可 以 
写成 marginLeft 等 ， 以 此 类 推 。 
> my.style.fontWeight = 'bold'; 
"bold" 


我 们 也 可 以 通过 style 的 cssText 必 性， 将 CSS 样 式 当 作 字 符 串 来 处 
理 . 

> my.style.cssText; 

"border: 1px solid red; font-weight: bold;" 

这 样 一 来 ， 对 CSS 属 性 的 修改 束 补 归结 为 字符 串 操 作 : 

> my.style.cssText += " border-style: dashed;" 

"border: 1px dashed red; font-weight: bold; border-style: dashed;" 

7.4.3.2 玩 转 表单 

正如 之 前 所 述 ，JavaScript 是 一 种 很 好 的 客户 端 输入 验证 方式 ， 它 
能 替 我 们 节省 一 些 与 服务 融 的 通信 。 下 面 ， 让 我 们 以 当下 最 流行 的 页 
面 一 一 Google.com 的 表单 为 例 ， 来 实际 操练 一 下 表单 操作 ( 见 图 7- 
0) 8 


Google Search rT'm Feeling Lucky 


图 7-9 

首先 ， 我 们 使 用 querySelector0) 方 法 ， 按 照 CSS 选 择 需 规则 ， 选 取 
页 面 中 的 第 一 个 文本 输入 框 : 

> var input = document.querySelector(input[type=text]'); 

接 下 来 我 们 试 着 访问 我 们 所 选 定 的 搜索 框 : 

> input.name; 

"gq" 

然后 ， 我 们 通过 设置 value 属 性 来 改变 搜索 框 中 的 文字 : 


> input.value = 'my duery '; 


"my query" 


我 们 来 恶 摘 一 下 ， 将 按钮 中 的 单词 Lucky 稚 换 为 Tricky: 


> var feeling = document.querySelectorAll("button")[2]; 
> feeling.textContent = feelingtextContent.replace(/Lu/, "Tri"); 
"Im Feeling Tricky" 


my query 


Google Search I'm Feeling Tricky 


图 7-10 
下 面 ， 我 们 来 实现 这 个 “tricky” 功 能 ， 即 令 按钮 一 秒 钟 显示 或 隐藏 
一 次 。 我 们 可 以 通过 一 个 叫做 toggle0) 的 简单 函数 来 实现 。 当 该 函数 每 
次 被 调用 时 ， 它 会 自动 检查 该 按钮 的 CSS 属 性 visibility 值 ， 如 果 
为 "hidden"， 则 将 其 设置 为 "visible"。 反 之 亦 然 。 
function toggle(){ 
var st = document.querySelectorAll(button )[2].style; 
st.visibility = (st.visibility === ‘hidden') 
? 'visible' 
: 'hidden'; 
} 
当然 ， 该 函数 不 是 靠 手 动 调用 的 ， 我 们 还 得 设置 一 个 计时 右 ， 令 
其 每 秒 钟 被 调用 一 次 : 
> var myint = setInterval(toggle, 1000); 
知道 会 有 什么 效果 吗 ? 按钮 会 不 停 地 闪烁 《这 给 单 击 带 来 了 一 定 
的 难度 ) 。 当 然 ， 如 果 您 玩 厌 了 ， 只 要 取消 计时 器 即 可 。 


> clearInterval(myint); 


7.4.4 新 建 节点 


通常 情况 下 ， 我 们 可 以 用 createElement() 和 createTextrNode() 这 两 个 
方法 来 创建 新 节点 。 而 appendChild()、insertBefore() 和 replaceChindO) 三 
个 方法 则 可 以 用 来 将 新 节点 添加 到 DOM 树 结构 中 。 

让 我 们 回 到 页 面 http://www.phpied.com/files/jsoop/ch7.html， 打 开 控 
制 台 ， 然 后 开始 吧 ! 

下 面 ， 我 们 创建 一 个 新 的 p 元 素 ， 并 对 它 的 innerHTML 属 性 进行 设 
置 : 

> var myp = document.createElement('p'); 

> myp.innerHTML = 'yet another'; 

"yet another" 

一 般 来 说 ， 被 新 建 的 元 素 会 自动 获得 所 有 的 默认 属性 ， 例 如 
style， 我 们 可 以 对 它 进 行 修改 : 

> myp.style; 

CSSStyleDeclaration 
> myp.style.border = '2px dotted blue'; 
"2px dotted blue" 

通过 appendChild0) 方 法 ， 我 们 可 以 将 新 节点 添加 到 DOM 树 结构 中 
去 。 并 且 ， 该 方法 应 该 是 在 document.body 上 被 调用 的 ， 这 指定 了 新 节 
点 应 该 被 创建 在 该 对 象 最 后 一 个 子 节 点 的 后 面 。 

> document.body.appendChild(myp); 


<p style="border: 2px dotted blue;">yet another</p> 


下 面 有 古 一 张 新 季 点 载 入 页 面 之 后 的 效果 图 ( 见 图 7-11) : 


first paragraph 


second DaragTaph 


final 


图 7-11 
7.4.4.1 纯 DOM 方法 
通常 情况 下 ， 使 用 innerHTML 来 设置 内 容 会 更 便捷 一 些 ， 如 果 要 
使 用 纯 DOM 方 法 ， 我 们 就 必须 : 
1. 新 建 一 个 内 容 为 "yet another" 的 文本 节点 。 
2. 再 新 建 一 个 段落 节点 。 
3. 将 文本 市 点 添加 为 段落 六 点 的 子玉 反 。 
4. 将 段落 们 扩 添 加 为 body 的 子玉 把。 
通过 这 种 方式 ， 我 们 可 以 创建 任意 数量 的 文本 节点 和 元 素 ， 并 随 
心 所 和 欲 地 安排 它们 之 间 的 嵌 套 关系 。 让 我 们 再 来 看 一 个 例子 ， 如 果 您 
想 将 下 面 的 HTML 代 码 加 入 body 元 素 的 后 端 ; 
<p>one more paragraph<strong>bold</strong></p> 
也 就 是 说 ， 我 们 所 要 提交 的 东西 有 如 下 结构 : 
P element 
text node with value "one more paragraph" 
STRONG element 


text node with value "bold" 


让 我 们 来 看 看 完成 这 个 代码 应 该 怎么 写 : 


// create P 

var myp = document.createElement('p'); 

// create text node and append toP 

var myt = document.createTextNode('one more paragraph ); 

myp.appendChildOnyt); 

// create STRONG and append another text node to it 

var str = document.createElement('strong ); 

str.appendChild(document.create TextNode('bold')); 

//append STRONG toP 

myp.appendChild(str); 

// append P to BODY 

document.body.appendChild(myp); 

7.4.4.2 cloneNode() 

另外 ， 找 贝 (或 克隆 ) 现 有 节点 也 是 一 种 创建 节点 的 方法 。 这 需 
要 用 到 cloneNode() 方 法 ， 该 方法 有 一 个 布尔 类 型 的 参数 (true = 深 找 
贝 ， 包 括 所 有 子 节 点 ; false = 浅 拷贝 ， 只 针对 当前 节点 ) 。 下 面 。 让 
我 们 来 测试 一 下 该 方法 。 

首先 ， 我 们 获取 需要 克隆 元 素 的 引用 : 

> var el = document.getElementsByTagName('p)[1j; 

现在 ，el 指 癌 了 页 面 中 的 第 二 个 段落 ， 内 容 如 下 : 

<p><em>second</em> paragraph</p> 

然后 ， 我 们 来 建立 一 份 @ 的 浅 找 贝 ， 并 将 其 添加 到 body 元 素 的 末 
端 : 

> document.body.appendChild(el.clone Node(false)); 

这 时 候 ， 我 们 在 页 面 上 不 会 看 出 有 yi 因为 浅 找 贝 只 复制 

了 p 闻 点， 并 没有 包含 它 的 任何 子 方 态 。 这 意味 着 该 段落 中 文本 ( 即 其 


中 的 文本 类 节点 ) 并 没有 复制 过 来 。 也 就 是 说 ， 这 行 代码 的 作用 就 相 
对 于 : 

> document.body.appendChild(document.createElement('p')); 

但 如 果 我 们 现在 创建 的 是 一 份 深 斤 贝 ， 那 么 以 p 元 素 为 首 的 整个 
DOM 了 于 树 都 将 会 被 拷贝 过 来 ， 其 中 包 侣 了 文本 和 点 和 em 元 系 。 这 行 代 
码 将 第 二 段 复 制 并 插入 到 了 文本 末端 。 

> document.body.appendChild(el.clone Node(true)); 

如 果 您 愿意 的 话 ， 也 可 以 只 拷贝 其 中 的 em 元 素 : 

> document.body.appendChild(el.firstChild.cloneNode(true)); 

<em>second</em> 

或 者 只 拷贝 内 容 为 "second" 的 文本 点 : 

> document.body.appendChild( 

el.firstChild. firstChild.cloneNode(false)); 
"second" 

7.4.4.3 insertBefore() 

通过 appendChild0 方 法 ， 我 们 只 能 将 新 节点 添加 到 指定 入 点 的 末 
端 。 如 果 想 更 精确 地 控制 插入 节点 的 位 置 ， 我 们 还 可 以 使 用 
insertBefore(0) 方 法 。 该 方法 与 appendChild0 基 本 相同 ， 只 不 过 它 多 了 一 
个 额外 参数 ， 该 参数 可 以 用 于 指定 将 新 万 点 插入 哪 一 个 元 素 的 前 面 。 
例如 在 下 面 的 代码 中 ， 文 本 帮 点 被 插入 body 元 素 的 末 病 ; 

> document.body.appendChild(document.createTextNode('boo!')); 

我 们 也 可 以 将 同样 的 文本 市 扣 添 加 为 body 元 素 的 第 一 个 于 习 扩 : 

document.body.insertBefore( 

document.createTextNode('boo!'), 


document.body.firstChild 
); 


7.4.5 移 除 节点 


要 想 从 DOM 树 中 移 除 一 个 节点 ， 我 们 可 以 调用 removeChild0。 下 
面 ， 让 我 们 再 次 以 body 元 素 为 例 : 

<body> 

<p class="opener">first paragraph</p> 
<p><em>second</em> paragraph</p> 
<p id="closer">final</p> 
<!-- and that's about it --> 

</body> 

我 们 移 除 第 二 段落 : 

> var myp = document.getElementsByTagName('p)[1]; 

> var removed = document.body.removeChild(myp); 

如 果 我 们 稍 后 还 需要 用 到 被 移 除 的 节点 的 话 ， 可 以 保存 该 方法 的 
返回 值 。 尽 管 该 节点 已 经 不 在 DOM 树 结构 中 ， 但 我 们 依然 可 对 其 调用 
所 有 的 DOM 方 法 : 

> removed,; 

<p>...</p> 

> removed .firstChild; 

<em>second</em> 

除 此 之 外 ， 还 有 一 个 replaceChild() 方 法 ， 该 方法 可 以 在 移 除 一 个 节 
点 的 同时 将 另 一 个 万 点 放 在 该 位 置 。 下 面 ， 我 们 来 看 看 之 前 移 除 节点 
之 后 的 情况 ， 现 在 的 树 结构 应 该 是 这 样 : 

<body> 

<p class="opener">first paragraph</p> 
<p id="closer">final</p> 


<!-- and that's about it --> 


</body> 

现在 ， 第 二 段 已 经 变 成 了 ID 为 "closer" 的 元 素 : 

> var p = document.getElementsByTagName('p)[1]; 

> P， 

<p id="closer">final</p> 

我 们 用 removed 变 量 中 的 段落 玲 换 掉 变 量 p 指 向 的 段落 : 

> var replaced = document.body.replaceChild(removed, p); 

与 ramoveChild0 相 似 ，replaceChild0) 方 法 也 会 返回 被 移 除 节点 的 引 


> replaced; 
<p id="closer">final</p> 
现在 ，body 元 系 中 的 内 容 如 下 : 
<body> 
<p class="opener">first paragraph</p> 
<p><em>second</em> paragraph</p> 
<!-- and that's about it --> 
</body> 
如 果 我 们 想 将 某 个 子 树 中 的 内 容 一 并 抹 去 的 话 ， 最 便捷 的 方式 十 
环 将 它 的 innerHTML 设 置 为 空 字符 串 。 下 面 我 们 移 除 body 中 的 所 有 子 
节点 : 
> document.body.innerHTML = "; 
我 们 来 测试 一 下 : 
> document.body.firstChild 
null 
使 用 innerHTML 来 移 除 确实 很 容易 ， 但 如 果 我 们 只 使 用 纯 DOM 方 
法 的 话 ， 束 必须 对 其 所 有 的 子 世 点 进行 遇 历 并 逐个 删除 它们 。 下 面 ， 


我 们 给 出 了 一 个 用 于 删除 某 个 指定 太 点 所 有 子 市 态 的 函数 : 
function removeAll(n) { 
while (n.firstChild) { 
n.removeChild(n.firstChild); 
} 
} 
如 果 我 们 想 删除 body 中 的 所 有 子 节 点 ， 将 页 面 变 成 一 个 空 <body> 
</body> 的 话 ， 可 以 : 


> removeAll(document.body); 


7.4.6 只 适用 于 HTML 的 DOM 对 象 


正如 我 们 所 知 ， 文 档 对 象 模型 同时 适用 于 XML 和 HTML 文 档 。 前 
面 ， 我 们 已 经 学 习 了 如 何 对 树 结构 进行 退 历 ， 并 添加 、 删 除 、 修 改 任 
何 XML 文档 树 中 的 和 点 。 但 是 ， 还 有 一 些 对 象 和 属性 是 只 适用 于 
HTML 的 。 

例如 ，document.body 就 是 一 个 纯 HTML 对 象 。 但 它 的 应 用 是 如 此 
的 常见 ， 只 要 HTML 文档 中 包含 了 <body> 标 签 束 可 以 访问 ， 其 功能 等 
价 于 document.getElements ByTagName(body)[0]， 但 调用 方式 则 要 友好 
得 多 。 

document.body 是 一 个 典型 的 、 根 据 史 前 标准 DOM Level 0 和 HTML 
特性 扩展 而 来 的 DOM 对 象 。 像 document.body 这 样 的 对 象 还 有 不 少 ， 
这 些 对 象 中 ， 有 些 在 Core DOM 组 件 中 是 找 不 到 等 价 物 的 ， 而 有 些 则 可 
以 ,但 普遍 都 在 DOM 0 标准 的 基础 上 做 了 一 定 的 简化。 下 面 ， 让 我 们 
来 了 解 一 下 这 些 对 象 。 

7.4.6.1 访问 文档 的 基本 方法 


与 如 今 DOM 组 件 可 以 访问 页 面 中 的 任何 元 素 (甚至 包括 注释 和 空 
白 处 ) 不 同 的 是 ， JavaScript 最 初 所 能 访问 的 内 容 只 局 限于 一 些 HTML 
文档 中 的 元 素 。 其 主要 由 以 下 一 系列 集合 对 象 组 成 。 
当前 页 面 中 所 有 图 片 的 集合 ， 等 价 于 Core 
DOM 组 件 中 的 document.getElementsByTagName(img) 调 用 。 

document.applets 价 


document.images 


document.getElementsBylTagName('applets') ° 

document.links ° 

document.anchors ° 

document.forms ° 

其 中 ，document.links 是 一 个 列表 ， 它 包含 了 页 面 中 所 有 的 <a 
href="..."></a> 标 位 ， 也 就 是 页 面 中 所 有 舍 有 href 属 性 的 A 标签 。 而 
document.anchors 中 包含 的 则 是 所 有 和 融 name 属性 的 链接 〈 即 <a 
name="..."></a>) 。 

而 使 用 最 广泛 的 还 是 要 数 document.forms 集 合 了 ， 这 是 一 个 <form> 
标签 的 列表 。 也 束 是 说 ， 我 们 可 以 这 样 访问 页 面 中 的 第 一 个 form 元 
素 : 

> document.forms[0]; 

这 殉 相 当 于 我 们 调用 : 

> document.getElementsBylagName('form")[0]j; 

document.forms 集合 中 包含 一 系列 的 input 字段 和 按钮 ， 我 们 可 以 
通过 该 对 象 的 elements 属 性 来 访问 它们 。 下 面 我 们 访问 页 面 中 第 一 个 
form 元 素 中 的 第 一 个 input 字 段 : 

> document.forms[0].elements[0]; 

一 旦 我 们 获得 了 某 个 元 素 的 访问 权 ， 就 可 以 通过 对 象 同名 属性 访 
问 该 元 素 的 属性 。 现 在 假设 第 一 个 form 元 么 的 百 字 段 如 下 : 


<input name="search" id="search" type="text 
size="50"maxlength="255" value="Enter email..." /> 
那么 ， 我 们 就 可 以 通过 某 种 方法 改变 该 字段 中 的 文本 ( 即 其 value 
属性 的 值 ) ， 例 如 : 
> document.forms[0].elements[0].value = 'me@example.org'; 
"meDexample.org" 
如 果 想 将 该 字段 动态 地 设置 为 不 可 用 的 话 ， 我 们 也 可 以 : 
> document.forms[0].elements[0].disabled = true; 
另外 ， 如 采 form 本 导 或 者 form 中 的 元 素 拥有 name 属 性 的 话 ， 我 们 
也 可 以 通过 名 字 来 访问 : 
> document.forms[0].elements['search'];// array notation 
> document.forms[0].elements.search; // object property 
7.4.6.2 document.write() 
通过 document.write() 方 法 ， 我 们 可 以 在 当前 页 面 载 入 时 搬入 一 些 
HTML 元 素 ， 例 如 ， 我 们 可 以 : 
<p>lt is now 
<script> 
document.write("<em>" + new Date() + "</em>"); 
</script> 
</p> 
其 效果 与 我 们 直接 在 HTML 文 档 中 插入 相关 日 期 相同 : 
<p>lt is now 
<em>Fri Apr 26 2013 16:55:16 GMT-0700 (PDT)</em> 
3 
需要 注意 的 是 ， 我 们 只 能 在 页 面 正 在 被 载 入 时 调用 
document.write() 方 法 ， 如 果 我 们 试图 在 页 面 载 入 之 后 调用 该 方法 ， 整 
个 页 面 的 内 容 都 会 被 殖 换 掉 。 


事实 上 ， 我 们 很 少 需要 用 到 document.write(0) 方 法 ， 如 果 您 觉得 需 
要 的 话 ， 那 就 应 该 先 尝 试 一 下 其 他 方法 。 毕 竟 就 修改 页 面 内 容 而 言 
DOM Level 1 所 提供 的 方法 要 简单 灵活 得 多 。 

7.4.6.3 Cookies 、 Title 、 Referrer、 Domain 

在 这 一 节 中 ， 我 们 还 将 为 您 介绍 男 外 四 个 属性 ， 这 些 属性 都 属于 
从 DOM Level 0 移植 到 DOM Level 1 的 HTML 扩 展 。 并 且 ， 这 些 属性 与 
之 前 所 介绍 的 属性 不 一 样 ， 它 们 在 Core DOM 中 并 没有 等 价 物 。 

document.cookie 属 性 实际 上 是 一 个 字符 串 ， 其 中 存储 了 用 于 往返 服 
务 器 端 与 客户 端 之 间 的 cookie 信息 。 每 当 服 务 絮 癌 浏 览 絮 发 送 页 面 
上 时， 往往 都 会 发 送 Set-Cookie 这 一 HITP 头 。 当 客户 端 客户 端 再 癌 服 务 
器 发 送 请 求 时 ， 客 户 端 也 会 将 cookie 信 息 写 入 Cookie 这 一 HITP 头 。 通 
过 document.cookie 属 性 ， 我 们 可 以 对 浏览 右 的 cookie 信 息 进 行 某 些 操 
作 。 下 面 我 们 来 看 一 个 示例 ， 先 访问 cnn.com 网 站 ， 然 后 在 控制 台中 


输入 document.cookie: 


> document.cookie: 
"mbox=check#true#1356053765lsession#1356053704195- 
121286#1356055565;... 
document.title 属性 则 是 被 用 来 修改 页 面 在 浏览 器 窗口 中 所 显示 的 
标题 的 。 下 面 依然 以 cnn.com 网 站 为 例 ， 我 们 可 以 这 样 做 : 
> document.title = "My title'; 
"My title" 
但 要 注意 的 是 ， 这 里 并 没有 改变 <title> 标 签 本 身 的 值 ， 只 是 改变 了 
其 在 浏览 器 窗口 中 的 显示 内 容 。 所 以 ， 该 集合 并 不 等 价 于 
document.querySelector('title') ° 
document.referrer 中 记录 的 是 我 们 之 前 所 访问 过 的 页 面 URL。 这 与 
浏览 器 在 请 求 页 面 时 所 发 送 的 HTTP 头 信息 中 的 Referer 值 是 相同 的 (要 
注意 的 是 ，HITP 头 信息 中 的 Referer 在 拼写 上 是 错误 的 ， 而 


documentreferrer 则 是 正确 的 区) 。 人 例如， 如果 您 是 通过 Yahool! 搜 索 来 
访问 CNN 主 页 的 ， 我 们 束 会 看 到 如 下 信息 


> document.referrer; 


"http://search.yahoo.com/search?p=cnn&ei=UTF-8&fr=moz2" 

通过 document.domain， 我 们 可 以 得 到 当前 所 载 入 页 面 的 域名 。 我 
们 经 常 在 某 些 跨 域 调用 中 用 到 它 。 可 以 想象 一 下 ， 如 果 yahoo.com 的 主 
页 中 有 一 个 iframe 标 签 ， 其 中 所 载 入 的 内 容 却 是 来 自 music.yahoo.com 。 
它们 是 两 个 不 同 的 域 ， 恨 贤 一役 浏 蜗 融 的 妈 全 规则 ， 通 常情 况 下 是 不 
允许 页 面 与 该 iframe 进 行 交 互 的 。 这 时 候 ， 如 采 我 们 想 实 现 这 两 个 页 面 
之 间 “ 交 谈 ”， 就 需要 用 document.domain 将 相关 的 域 全 都 设置 为 
yahoo.com ° 

需要 注意 的 是 ， 域 的 设置 只 能 朝 着 更 非 具 体 化 的 方向 进行 。 例 
如 ，www.yahoo.com 有 的 域 可 以 人 被 改 为 yahoo.com， 但 yahoo.com 的 域 束 不 
能 再 被 改 为 www.yahoo.com 或 其 他 非 yahoo 域 名 了 。 


> document.domain; 


"www.yahoo.com" 
> document.domain = 'yahoo.com,'; 
"yahoo.com" 
> document.domain = "www.yahoo.com '; 
Error: SecurityError: DOM Exception 18 
> document.domain = "www.example.org'; 
Error: SecurityError: DOM Exception 18 
之 前 在 本 草 中 ， 我 们 曾经 为 您 介绍 过 window.location 对 象 。 那 么 ， 
实际 上 我 们 也 可 以 用 document.location 来 实现 相同 的 功能 


> window.location === document.location:; 


true 


7.5 事件 


想象 一 下 ， 如 果 您 突然 在 收音 机 里 听 到 有 人 宣布 : “大 事件 ! 重大 
事件 ! 外 星人 登陆 地 球 了 ! ?或 许 您 的 反应 是 “ 耶 ， 我 无 所 谓 ! ”， 但 有 
些 听 众 可 能 会 觉得 “它们 是 和 平 使 者 ! ”， 而 男 一 些 则 可 能 会 觉得 “这 下 
所 有 人 都 要 死 了 ! ”。 同样 的 ， 浏 宽 器 中 所 发 生 的 事件 也 能 以 广播 收听 
和 监听 的 形式 传递 给 相关 的 代码 。 这 些 事件 包括 ; 

用 户 单 击 某 一 按钮 ; 

用 户 在 某 一 表单 域 中 输入 字符; 

某 页 面 载 入 完成 。 

我 们 可 以 为 这 些 事件 指定 相应 的 JavaScript 了 范 数 ， 这 些 函 数 通 常 外 
称 为 事件 监听 器 (event listener) 或 事件 处 理 器 (event handler) 。 这 样 
一 来 ， 浏 贤 器 就 会 在 相关 事件 发 生 时 执行 既定 的 函数 。 下 面 ， 我 们 来 
看 看 具体 是 如 何 实现 的 。 


7.5.1 内 联 HTML 属性 法 


最 简便 也 最 难以 维护 的 方式 就 是 通过 标签 的 特定 属性 来 添加 事 
件 ， 例 如 : 

<div onclick="alert(Ouch!')">alick</div> 

在 这 种 情况 下 ， 只 要 该 <div> 所 在 的 区 域 被 用 尸 单 击 了 ， 束 会 触发 
该 标签 的 单 击 事件 。 与 此 同时 ， 其 onclick 属 性 中 的 字符 串 就 会 被 当做 
JavaScript 代 码 来 执行 。 尽 管 ， 这 里 并 没有 显 式 指 定 监 听 单 击 事件 的 函 
数 ， 但 相关 环境 在 幕后 已 经 为 此 创建 了 一 个 函数 ， 函 数 的 代码 就 等 于 
我 们 为 onclick 属 性 设 定 的 值 。 


7.5.2 元 素 属 性 法 


天 于 单 击 事件 函数 ， 我 们 还 有 另 一 种 编写 方式 ， 那 加 是 将 其 设置 
为 DOM 元 素 广 点 的 属性 。 例 如 : 
<div id="my-div">click</div> 
<script> 
var myelement = document.getElementByld('my-div'); 
myelement.onclick = function() { 
alert(Ouch1 ); 
alert(And double ouch!"); 
} 
</script> 
事实 上 这 也 是 一 种 更 好 的 选择 。 因 为 这 种 方式 可 以 帮助 我 们 理 清 
<div> 与 相关 JavaScript 代 码 之 间 的 关系。 一般 情况 下 。 我 们 总 是 锅 望 页 
面 中 的 内 容 归 HTML 、 行 为 归 JavaScript、 格 式 归 CSS， 并 且 三 者 之 间 
应 该 尽 可 能 彼此 独立 ， 互 不 干扰 。 
但 这 个 方法 也 是 有 缺点 的 ， 因 为 这 种 做 法 只 允许 我 们 指定 一 个 事 
件 范 数 ， 这 就 好 像 我 们 的 收 首 机 只 能 有 一 个 听从 一样。 当然 ， 我 们 可 
以 对 多 个 事件 使 用 同一 个 处 理 画 数 ， 但 这 样 做 始终 不 太 方 便 ， 束 好 像 
我 们 每 次 都 得 让 所 有 的 收音 机 听众 都 集中 在 一 个 房间 里 一 样 。 


7.5.3 DOM 世 蜂 h 


对 于 浏览 历来 说 ， 最 佳 的 事件 处 理 方 式 当 然 莫 过 于 出 目 DOM Level 
2 的 事件 监听 如 了 。 通 过 这 种 方式 ， 我 们 可 以 为 一 个 事件 指定 多 个 监听 
右 图 数 。 当 事件 被 触发 时 ， 所 有 的 监听 右 璇 数 部 会 被 执行 。 而 且 ， 这 
些 监 听 器 之 间 不 需要 知道 彼此 的 存在 ， 它 们 的 工作 是 彼此 独立 的 。 任 
何 一 个 画 数 的 加 入 或 退出 部 不 会 影响 其 他 监听 占 的 工作 。 


现在 ， 让 我 们 回 到 上 一 节 中 的 那个 简单 标志 页 (您 也 可 以 直接 访 
) 


问 http://www. phpied.com/files/jsoop/ch7.html) ， 我 们 所 拥有 的 标志 
日 
十 : 


<p id="closer">final</p> 
我 们 可 以 通过 addEventListener(0) 方 法 为 单 击 事件 赋予 相关 的 监听 
硕 。 下 面 我 们 务 试 赋予 两 个 监听 希 : 
var mypara = document.getElementById(closer ); 
mypara.addE.ventListener('click', function(O){ 
alert(Boo!') 
}, false); 
mypara.addEventListener( 
'click', console.log.bind(console), false); 
如 您 所 见 ，addEventListeners0) 方 法 是 基于 某 一 节点 对 象 来 调用 
的 。 它 的 首 参 数 是 一 个 事件 类 型 的 参数 ， 第 二 个 参数 是 一 个 函数 指 
针 ， 它 可 以 是 functionO{alert (Boof} 这 样 的 匿名 函数 ， 也 可 以 是 
console.log0 这 样 的 现存 汞 数 。 该 监听 器 函数 会 在 相关 事件 发 生 时 被 调 
用 ， 调 用 时 会 接收 到 一 个 事件 对 象 参数 。 如 果 我 们 运行 上 面 的 代码 ， 
就 可 以 在 控制 台 看 到 所 记录 的 事件 对 象 。 单 击 事件 对 象 可 以 查看 其 属 
性 ( 见 图 7-12) 


x) [3 Elements Resources © Network 世 a SOUTCES 


THMHouUsSeEvent {webkitMovementY: @, webkitMovementXx: 
altKey: false 
bubbles: true 
button: @ 
cancelBubble: false 
cancelable: true 
charCode: 0@ 
clientX: 19 
clientY: 92 
clipboardData: undefined 
ctrlKey: false 
currentTarget:; null 
dataTransfer: null 
defaultPrevented: false 
detail: 1 
eventPhase: @ 
fromElement: null 
keyCode: @ 

LayerX: 19 
LayerY: 92 
metaKey: false 
offsetX: 11 
offsetY: 8 
pageX: 19 
pageY: 92 
relatedTarget: nul\ 
returnValue: true 
screenX: 254 
screenY: 186 
shiftKkey: false 
srcElement: <p> 
target: <p> 
timeSstamp: 1356056143153 
toElement: <p>s 
types “click” 
view: Window 
webkitMovementX: &@ 
webkitMovementY: @ 
which: 1 
x: 19 
vy: 92 

bp __proto_ : MouseEvent 


图 7-12 
7.5.4 捕 提 法 与 冒 泡 法 


在 之 前 调用 addEventListener() 方 法 的 过 程 中 ， 我 们 还 传 入 了 第 三 个 
参数 false。 下 面 我 们 来 看 看 这 个 参数 是 什么 。 

假设 我 们 有 一 个 链接 ， 它 被 舰 套 在 一 个 无 序列 表 标 签 内 ， 例 如 : 

<body> 


<ul> 
<li><a href="http://phpied.com">my blog</a></li> 
</ul> 
</body> 
当 我 们 单 击 该 链接 时 ， 实 际 上 我 们 也 单 击 了 列表 项 <li>、 列 表 
<ul>、<body> 力 至 于 整个 document 对 象 ， 这 种 行为 称 之 为 传播 
(propagation) 。 换 句 话说 ， 对 该 链接 的 单 击 也 可 以 看 做 对 document 对 
象 的 单 击 。 事 件 传播 过 程 通 常 有 两 种 方式 ; 
事件 捕捉 (event capturing) 一 一 单 击 首 先 发 生 在 document 上 ， 然 
后 依次 传递 给 body、 列 表 、 列 表 项 ， 并 最 终 到 达 该 链接 ， 称 为 捕捉 
法 。 
事件 冒 泡 (event bubbling) 一 一 单 击 首先 发 生 在 链接 上 ， 然 后 逐 
层 回 上 冒 泡 ， 直 至 document 对 象 ， 称 为 冒 泡 法 。 
按照 DOM Level 2 的 建议 ， 事 件 传播 应 该 分 成 三 个 阶段 : 先是 捕捉 
标签 ， 然 后 到 达 对 象 ， 再 冒 泡 ( 见 图 7-13) 。 也 就 是 说 ， 事 件 传播 的 路 
径 应 该 是 先 从 document 到 相关 链接 (标签 ， 然 后 回 到 document。 如 
果 想 要 了 解 某 一 事件 当前 所 处 的 阶段 ， 我 们 可 以 去 访问 事件 对 象 的 
eventPhase 属 性 。 


CAPTURING 
59NI189n9 
: 川 3SVHd 


PHASE | : 


CLICK ! 
PHASE 1I : 
AT TARGET 


图 7-13 

从 历史 上 来 说 ， 正 和 Netscape (当时 业界 并 没有 一 个 统一 的 标准 可 
以 遵循 ) 的 相关 实现 是 高 度 不 统一 的 。 焉 使 用 冒 泡 法 ， 而 Netscape 则 只 
使 用 捕捉 法 。 而 在 当今 ， 也 就 是 DOM 标 准 建 立 之 后 ， 现 代 浏 览 器 们 终 
于 统一 实现 了 这 三 个 阶段 。 

我 们 可 以 通过 如 下 方式 处 理事 件 捕获 : 

通过 addEventListener() 的 第 三 个 参数 ， 我 们 可 以 决定 代码 是 否 采 用 
捕捉 法 来 处 理事 件 。 人 然而， 为 了 让 我 们 的 代码 适用 于 更 多 的 浏览 器， 
最 好 还 是 始终 将 其 设置 为 false， 即 只 使 用 冒 泡 法 来 处 理事 件 。 

我 们 也 可 以 在 监听 器 函数 中 阻 断 事 件 的 传播 ， 令 其 停止 同上 冒 
泡 ， 这 样 一 来 ， 事 件 残 不 会 再 到 达 document 对 象 那 里 了 “。 为 了 做 到 这 
一 点 ， 我 们 就 必须 去 调用 相关 事件 对 象 的 stopPropagation() 方 法 (相关 
示例 我 们 将 会 在 下 一 节 中 看 到 ) 。 

另外 ， 我 们 还 可 以 采用 事件 委托 。 例 如 ， 如 有 果 某 个 <div> 中 有 10 
个 按钮 ， 那 么 ， 通 常 每 个 按钮 都 需要 一 个 事件 监听 器 ， 这 样 一 来 ， 我 


们 惑 要 设置 10 个 监听 器 画 数 。 而 更 聪明 的 做 法 是 ， 我 们 只 为 整个 <div> 
设置 一 个 监听 器 ， 当 事件 发 生 时 ， 让 它 自己 去 判断 被 单 击 的 是 哪 一 个 
按钮 。 

作为 参考 ， 我 们 还 是 要 介绍 一 下 在 旧版 本 的 正 中 使 用 事件 捕捉 的 
方式 ， 即 使 用 setCapture0 和 releaseCapture(0) 方 法 ， 但 是 这 种 方式 只 适用 
于 处 理 鼠 标 类 事件 ， 对 于 其 他 类 型 的 事件 (例如 键盘 类 事件 ) 则 不 起 
作用 。 


7.5.5 阻 断 传播 


下 面 ， 我 们 来 演示 一 下 如 何 让 事件 停止 它 的 冒 泡 式 传播 。 首 先 ， 
我 们 回 到 之 前 的 测试 文档 ， 现 有 的 标签 是 : 

<p id="closer">final</p> 

然后 ， 我 们 来 定义 一 个 用 于 处 理 该 段落 单 击 事件 的 函数 : 


function paraHandler(){ 


alert('clicked paragraph'"); 
} 
现在 ， 我 们 将 该 函数 设置 为 单 击 事件 的 监听 磊 : 
var para = document.getElementById(Ccloser ); 
para.addEventListener('click', paraHandler false); 
同时 ， 我 们 还 可 以 将 该 单 击 监听 器 设置 给 body、document， 力 至 
于 整个 浏览 器 的 window 对 象 : 
document.body.addEventListener('click', function(){ 
alert ('clicked body'); 
}, false); 
document.addE.ventListener('click', function(O){ 
alert ('clicked doc ); 


}, false); 
window.addEventListener('click', function(){ 
alert ('clicked window'); 

}, false); 

需要 注意 的 是 ， 按 照 DOM 标 准 来 说 ，window 事 件 是 不 存在 的 。 这 
束 是 为 什么 DOM 指 的 是 文档 而 不 是 浏 贤 釉 。 因 此 ， 实 际 上 浏 贤 釉 对 于 
window 事 件 的 实现 与 DOM 事 件 的 实现 并 不 一 致 。 

现在 ， 如 末 我 们 单 击 一 下 该 段落 ， 束 会 看 到 四 个 警告 窗 ， 它 们 分 


clicked paragraph:; 

clicked body:; 

clicked dorc:; 

clicked window ° 

这 诠释 了 同一 单 击 事件 从 具体 标签 向 整个 窗口 传播 的 全 过 程 (也 
就 是 向 上 冒 泡 的 全 过 程 ) 。 

addEventListener() 方 法 的 对 立 面 就 是 ee 该 方 
法 的 参数 与 前 者 相同 。 下 面 ， 我 们 移 除 该 段落 上 的 监听 器 

> para.removeEventListener('click', paraHandler, false); 

现在 如 果 再 次 单 击 段落 ， 就 只 会 弹出 body、document 对 和 象 及 
window 对 象 的 单 击 事件 窗 ， 不 再 有 和 针对 该 段落 的 弹出 窗 了 。 

下 面 ， 我 们 来 阻 断 事件 的 传播 。 首 先 要 定义 一 个 以 事件 对 象 为 参 
数 的 函数 ， 并 在 函数 内 对 该 对 象 调用 stopPropagation() 方 法 ; 


function paraHandler(e){ 


alert('clicked paragraph ); 
e.stopPropagation(); 

上 

然后 我 们 添加 修改 后 的 监听 右 


para.addEventListener('click', paraHandler false); 

现在 如 果 我 们 再 单 击 段落 ， 就 会 看 到 弹出 窗 只 有 一 个 了 ， 因 为 该 
事件 不 会 再 被 上 传 给 body、document 和 window 了 。 

要 提醒 的 是 ， 如 打 我 们 要 移 除 某 个 监听 器 ， 承 必须 获得 之 前 那 一 
个 指定 为 监听 器 函数 的 指针 。 和 否则， 即便 它们 的 函数 体 完全 相同 也 无 
济 于 事 ， 因 为 它们 两 者 不 是 同一 个 函数 。 


document.body.removeFE.ventListener('click,, 


function(){ 
alert('clicked body'); 


$s 
false); // does NOT remove the handler 


7.5.6 防止 默认 行为 


在 浏览 絮 模 型 中 ， 有 些 事件 目 身 束 存 在 一 些 预定 义 行为 。 例 如 ， 
单 击 链接 会 载 入 另 一 个 页 面 。 对 此 ， 我 们 可 以 为 该 链接 设置 监听 器 ， 
并 使 用 preventDefault(0) 方 法 禁用 其 默认 行为 。 
下 面 ， 我 们 来 麻烦 一 下 我 们 的 访客 ， 让 他 们 在 每 次 单 击 链接 之 
后 ， 回 答 一 个 问题 “Are you sure you want to follow this link?”。 每 当 他 
们 单 击 的 是 Cancel ( 即 confirm() 返 回 false) 时 ，preventDefault() 方 法 就 
会 被 调用 : 
// all links 
var all_links = document.getElementsByTagName('a'); 
for (var i = 0; i < all_links.length; i++) { //loop all links 
all_links[il.addEventListener( 
'click', // event type 
function(e){ // handler 


让 (Iconfirm(OAre you sure you want to follow this link?')){ 
e.preventDefault(); 
} 
je 
false // don't use capturing 
); 
} 
需要 提醒 的 是 ， 并 不 是 所 有 事件 的 默认 行为 都 是 可 禁止 的 。 尽 管 
大 部 分 事件 是 可 以 的 ， 但 如 果真 的 有 必要 确定 一 下 ， 我 们 可 以 去 检测 
事件 对 象 的 cancellable 属 性 。 


7.5.7 有 足 浏 览 器 区 监听 器 


正如 我 们 所 说 过 的 ， 现 在 绝 大 部 分 的 浏览 器 都 已 经 完全 实现 了 
DOM Level 1 标准 。 然 而 ， 事 件 方面 的 标准 化 是 到 DOM Level 2 才 完 成 
的 。 这 就 导致 了 IE9 以 前 的 版 本 与 其 他 现代 浏览 器 在 这 方面 的 实现 有 着 
不 少 的 差异 。 

让 我 们 再 引入 一 个 事件 示例 ， 该 示例 将 会 在 控制 台中 返回 被 单 击 
元 素 ( 即 目 标 元 素 ) 的 nodeName 属 性 值 : 


document.addEventListener('click', function(e){ 


console.log(e.target.nodeName); 
}, false); 
接 下 来 ， 我 们 仔细 看 看 下 的 实现 完 竟 有 哪些 不 同 之 处 。 
IE 中 没有 addEventListener() 方 法 ， 但 它们 从 IE5 开始 就 提供 了 一 
个 叫做 attachEvent() 的 等 效 方法 。 对 于 更 早期 的 版 本 ,我们 就 只 能 通过 
属性 方法 (例如 ondlick 属 性 ) 来 解决 问题 了 。 
对 于 单 击 事件 来 说 ， 使 用 attachEventO 就 等 同 于 使 用 onclick 属性 。 


如 有 果 我 们 使 用 老式 手法 来 进行 事件 监听 〈 例 如 ， 通 过 将 某 个 函数 
赋值 给 onclick 属 性 ) ， 那 么 当 该 回调 函数 被 调用 时 ， 它 不 会 获得 相关 
的 事件 参数 。 但 只 要 我 们 设置 了 事件 监听 希 ， 下 中 总 会 有 一 个 全 局 对 
象 window.evnet 会 指 疝 该 事件 。 

在 IE 的 事件 对 象 中 ， 没 有 用 于 反映 触发 事件 目标 元 素 的 target 属 
性 ， 但 我 们 可 以 使 用 它 的 等 效 属性 srcElement 。 

正如 之 前 所 提 到 的 ，IE 不 文 持 事件 捕捉 法 ， 而 只 使 用 冒 泡 法 来 运 
作 。 

IE 中 没有 stopPropagation() 方 法 ， 我 们 可 以 通过 将 于 -only 属 性 
cancelBubble 设 置 为 true 来 完成 相同 的 操作 。 

IE 中 没有 preventDefault0 方 法 ， 我 们 可 以 通过 将 下 -only 属性 
returnValue 设 置 为 false 来 完成 相同 的 操作 。 

对 于 事件 的 取消 监听 操作 ，IE 中 使 用 的 不 是 removeEventListener() 
方法 ， 我 们 要 调用 的 是 detachEvent(0) 方 法 。 

这 样 一 来 ， 我 们 就 将 原型 的 代码 修改 成 轿 浏 览 絮 版 本 了 : 


function callback(evt) { 


// prep work 
evt = evt || window.event; 
var target = evt.target || evt.srcElement; 
// actual callback work 
console.log(target.nodeName); 
} 
// start listening for click events 
if (document.addE.ventListener){ // Modern browsers 
document.addEventListener('click', callback, false); 
} else if (document.attachEvent){ // old IE 


document.attachEvent('‘onclick', callback); 


} else { 
document.onclick = callback: /ancient 


} 


7.5.8 型 


现在 ， 我 们 已 经 了 解 了 如 何 处 理 蜂 浏览 器 事件 ， 但 至 今 为 止 所 有 
的 示例 都 是 关于 单 击 事件 的 。 那 么 ， 除 此 之 外 还 有 哪些 事件 呢 ? 您 可 
能 已 经 猜 到 了 ， 不 同 的 训 顺 融 文 持 的 事件 也 是 不 同 的。 其 中 有 一 部 分 
事件 十 跨 浏览 器 的 ， 而 男 一 部 分 则 是 这 些 浏 哎 右 独 有 的 。 关 于 完整 的 
事件 列表 ， 您 可 能 需要 去 查看 相关 浏览 器 的 文档 。 在 这 里 ， 我 们 只 讨 
论 跨 浏览 右 事 件 的 话题 。 
有 滔 标 类 事件 。 
鼠标 键 的 松 开 、 按 下 、 单 击 ( 按 下 并 松 开 一 次 算 单 击 一 次 ) 、 双 


击 。 


鼠标 的 悬 停 〈 指 鼠标 停留 在 某 元 素 上 方 ) 、 移 出 〈 指 鼠标 从 某 元 
素 上 方 离开 ) 、 拖 动 。 
键盘 类 事件 。 
键盘 键 的 按 下 、 输 入 、 松 开 〈 这 三 个 事件 是 按 顺序 排列 的 ) 。 
载 入 /窗口 类 事件 。 
载 入 (图 片 、 页 面 或 其 他 组 件 完成 载 入 操作 ) 、 镍 载 ( 指 用 户 离 
开 当 前 页 面 ) 、 凶 载 之 前 “由 脚本 提供 的 、 人 允许 用 户 终 止 印 载 的 选 
项 ) 。 
中 止 〈《 指 用 户 在 正 中 停止 页 面 或 图 片 载 入 ) 、 错 误 〈 指 在 正人 发 
生 了 JavaScript 错 误 或 图 片 载 入 失败 ) 。 
调整 大 小 ( 指 浏览 器 窗口 大 小 被 重 置 ) 、 深 动 ( 指 页 面 进行 了 深 
动 操作 ) 、 上 下 文 菜单 ( 即 右键 菜单 出 现 ) 。 


表单 类 事件 。 


获得 焦点 ( 指 某 字段 获得 输入 ) 、 失 去 焦点 ( 指 离 开 该 字段 )。 
改变 〈 指 改变 茶 字 段 的 值 后 离开 ) 、 选 中 ( 指 某 文本 字段 中 的 文 
本 被 选中 ) 。 


重 置 ( 指 擦 除 用 户 输入 的 所 有 信息 ) 、 提 交 〈 指 发 送 表单 ) 。 

另外 ， 现 代 浏 哎 器 还 提供 拖 动 事件 (例如 dragstart，dragend，drop 
等 ) 。 触 探 设备 也 会 有 touchstart，touchmove，touchend 事 件 等 。 

到 这 里 ， 有 关 事 件 的 内 容 算 讨论 完了 。 请 读者 参考 本 章 最 后 的 练 
习题 ， 选 一 些 富有 挑战 性 的 题 日 来 实际 体验 一 下 这 些 跨 浏览 絮 事 件 的 
处 理 操 作 。 


7.0 XMLHttpRequest 对 象 


XMLHttpRequestO 是 一 个 用 构建 HTTP 请 求 的 JavaScript 对 象 (构造 
人 右 ) 。 从 历史 上 来 说 ，XMLHttpRequest (人 简称 XHR) 最 初 在 下 浏览 器 
中 是 以 ActiveX 对 象 的 形式 被 引入 的 。 但 正式 实现 该 对 象 则 是 始 于 
IE7， 那 时 候 也 只 是 该 浏览 器 中 的 一 个 本 地 对 象 ， 后 来 逐渐 被 其 他 浏览 
偶 所 接受 ， 并 形成 了 一 种 通用 的 路 浏 贤 右 实现 ， 这 束 是 所 谓 的 AJAX 应 
用 。 这 种 应 用 模式 可 以 使 我 们 无 须 每 次 都 通过 刷新 整个 页 面 来 获取 新 
内 容 。 我 们 可 以 利用 JavaScript 将 相关 的 HTTP 请 求 发 送 给 服务 器 器 ， 然 
后 根据 服务 器 端的 啊 应 来 局 部 更 新 页 面 。 总 而 言 之 ， 通 过 这 种 方式 构 
建 出 来 的 页 面 在 许多 响应 方式 上 会 更 类 似 于 桌面 应 用 。 

实际 上 ，AJAX 就 是 在 JavaScript 和 XML 之 间 所 建立 的 一 种 异步 联 
系 。 

之 所 以 是 异步 ， 是 因为 我 们 的 代码 在 发 送 HTTP 请 求 之 后 ， 不 需 
要 特地 停 下 来 等 待 服务 器 响应 ， 可 以 继续 执行 其 他 任务 ， 待 相关 信息 


到 达 时 自然 会 收 到 通知 (通常 以 事件 的 形式 出 现 ) 。 

JavaScript 一 一 它 的 作用 很 明显 ，XHR 对 象 就 是 用 JavaScript 来 创建 
的 。 

至 于 用 XML， 则 是 因为 开发 者 最 初 设计 这 种 HTTP 请 求 就 是 用 来 获 
取 XML 文档 ， 并 用 其 中 的 数据 来 更 新 页 面 的 。 但 是 如 今 这 种 做 法 已 经 
不 太 常 见 了 ， 这 种 方式 更 多 地 用 来 获取 纯 文本 格式 的 数据 ，JSON 格 式 
的 数据 ， 或 只 是 一 段 等 竺 被 插入 页 面 的 HIML 数 据 。 

关于 XMLHttpRequest 对 象 的 用 法 ， 主 要 可 以 分 为 两 个 有 效 步 又 。 

发 送 请 求 一 在 这 一 步骤 中 ， 我 们 需要 完成 XMLHttpRequest 对 象 
的 构建 ， 并 为 其 设置 事件 监听 器 。 

处 理 啊 应 一 一 在 这 一 步骤 中 ， 事 件 监 听 器 会 在 服务 器 的 啊 应 信息 
到 达 时 收 到 通知 ， 然 后 相应 的 代码 区 会 补 执 行 。 


7.6.1 发 送 请 求 


首先 ， 我 们 来 简单 地 创建 一 个 对 象 “对 于 不 同 的 浏览 器 ， 可 能 在 
细节 上 会 略 有 些 不 同 ) : 

var xhr = new XMLHttpRequest(); 

接 下 来 要 做 的 束 是 为 该 对 象 设置 一 个 能 触发 readystatechange 事 件 的 
事件 监听 屁 : 

xhr.onreadystatechange = myCallback; 

然后 ， 我 们 需要 去 调用 其 open() 方 法 ， 具 体 如 下 : 

xhr.open('GET', 'somefile.txt', true); 

如 您 所 见 ， 第 一 个 参数 指定 是 HITP 请 求 的 类 型 (包括 GET、 
POST、HEAD 等 ) 。GET 和 POST 是 其 中 最 常见 的 类 型 。 当 需要 发 送 的 
数据 不 是 很 多 ， 且 不 会 改写 服务 器 数据 时 ， 我 们 一 般 会 用 GET 类 型 ， 
否则 就 会 使 用 POST 类 型 。 而 第 二 个 参数 则 是 我 们 所 请 求 目 标的 URL 。 


在 这 个 示例 中 ， 我 们 所 请 求 的 是 一 个 与 当前 页 面 处 于 同一 目 孙 的 文本 
文件 somefile.txt。 最 后 一 个 参数 是 一 个 布尔 类 型 的 值 ， 它 决定 了 请 求 是 
否 按照 异步 的 方式 进行 : 是 就 为 tue 〈 大 多数 情况 下 都 为 此 选项 ) ， 
否则 就 为 false (此 选项 会 阻塞 JavaScript 执 行 ， 等 待 直到 该 请 求 的 返回 
数据 到 来 ) 。 

当然 了 ， 最 后 是 发 送 请 求 。 

xhr.send("); 

男 外 只 要 我 们 愿意 ， 可 以 用 send0) 方 法 在 发 送 请 求 时 附带 上 任何 数 
据 。 对 于 GET 类 请 求 来 说 ， 这 里 所 发 送 的 是 一 个 空 字 符 串 。 因 为 数据 
将 被 包含 在 URL 中 。 而 对 于 POST 请 求 来 说 ， 它 是 表单 数据 中 的 一 个 查 
询 字 符 串 key=value&key2=value2。 

这 样 一 来 ， 请 求 被 发 送出 去 之 后 ， 我 们 的 代码 (以 及 用 户 ) 就 可 
以 将 注意 力 转向 其 他 任务 。 待 它 收 到 服务 器 端 啊 应 时 ， 会 自动 启动 回 
调 函 数 myCallback 。 


7.6.2 处 理 响应 


我 们 已 经 为 readystatechange 事 件 设置 了 监听 器 ， 那 么 这 个 事件 究竟 
是 怎么 回 事 呢 ? 原来 ， 每 个 XHR 对 象 中 都 有 一 个 叫做 readyState 的 属 
性 。 一 旦 我 们 改变 了 该 属性 的 值 ， 束 会 触发 readystatechange 事 件 。 该 属 
性 可 能 的 状态 值 如 下 : 

0 一 一 未 初始 化 状态 ; 

1 一 一 载 入 请 求 状态 ; 

2 一 一 载 入 完成 状态 ; 

3 一 一 请 求 交 互 状态 ; 

4 一 一 请 求 完成 状态 。 


当 readyState 的 值 为 4 时 ， 就 意味 着 服务 器 端的 响应 信息 已 经 返回 ， 
可 以 开始 处 理 了 。 在 myCallback 了 芳 数 中 ， 除 了 确定 readyState 的 值 是 4 之 
外 ， 我 们 还 必须 检查 一 下 HTTP 请 求 的 状态 码 。 因 为 如 果 目 标 URL 实 际 
上 并 不 存在 ， 我 们 就 会 收 到 一 个 值 为 404 的 状态 码 (表示 未 找到 文 
件 ) ， 正 常情 况 下 该 值 应 该 为 200。 因 此 ，myCallback 有 必要 对 该 值 进 
行 检查 ， 该 状态 码 可 以 通过 XHR 对 象 的 status 属 性 来 获得 。 

一 旦 确定 了 xhrreadyState 的 值 为 4 并 且 xhrstatus 的 值 为 200， 我 们 束 
可 以 通过 xhr.responseText 来 访问 目标 URL 中 的 内 容 了 。 下 面 ， 我 们 看 
看 如 何在 myCallback 中 实现 用 人 简单 的 alert() 方 法 来 显示 目标 URL 中 的 内 
容 : 

function myCallback() { 

if (xhr.readyState < 4) { 
return; // not ready yet 

} 

if (xhr.status !== 200) { 
alert('Error!'); // the HTT?P status code is not OK 
return; 

} 

// all is fine, do the work 

alert(xhr.responseText); 

} 

一 旦 我 们 获得 了 所 请 求 的 东西 ， 束 可 以 将 其 添加 到 页 面 中 ， 或 者 
用 于 某 些 计算 以 及 其 他 我 们 所 能 想到 的 地 方 。 

总 而 言 之 ， 这 两 个 处 理 步骤 (发 送 请 求 、 处 理 啊 应 ) 是 整个 
XHR/AJAX 编 程 方式 的 核心 部 分 。 现 在 我 们 已 经 基本 掌握 了 ， 可 以 去 
构建 下 一 个 Gmail 了 。 哦 ， 对 了 ， 我 们 还 得 介绍 一 些 浏览 絮 之 间 的 细微 
的 不 一 致 之 处 。 


7.6.3 7 的 IE 版 本 中 创建 XMLHttpRequest 对 象 


在 早 于 版 本 7 的 Internet Explorer 浏 唤 器 中 ，XMLHttpRequest 对 象 
是 以 ActiveX 对 象 的 形式 存在 的 ， 因 此 创建 XHR 实 例 的 方式 会 有 些小 小 
的 不 同 ， 具 体 如 下 : 

var xhr = new ActiveXObject(MSXML2.XMLHTTP.3.0"); 

其 中 ， MSXML2.XMLHTTP.3.0 是 我 们 所 要 创建 对 象 的 标识 符 。 
因为 实际 上 ， XMLHttpRequest 对 象 有 几 个 不 同 的 版 本 ， 如 果 访 问 我 们 
网 页 的 客户 没有 安装 最 新 的 版 本 ， 在 放弃 他 们 之 前 ， 或 许 您 应 该 试 试 
前 两 个 版 本 。 

对 于 一 个 完整 的 跨 浏 宽 如 解决 方案 而 言 ， 我 们 应 该 自 先 对 用 户 浏 
蜗 右 所 文 持 的 XMLHttpRequest 对 象 进行 检查 ， 如 宁 该 浏览 右 中 没有 这 
个 对 象 ， 我 们 束 得 使 用 正方 案 。 因 此 ， 整 个 创建 XHR 实 例 的 过 程 应 该 
像 这 样 : 

Var ids = 
[MSXML2.XMLHTTP.3.0'"'MSXML2.XMLHTTP'","Microsoft. XMLHTTP!'] 


Var Xhr; 
if (XMLHttpRequest) { 
xhr = new XMLHttpRequest(); 
} else { 
/HIE:try to find an ActiveX object to use 
for (vari = 0; i < ids.length; i++) { 
try { 
xhr = new ActiveXObject(ids[i]); 
break; 
} catch (e){} 


} 

} 

下 面 来 看 看 这 段 代码 究竟 做 了 哪些 事 。 首 先 ， 数 组 ids 是 一 个 包含 
了 所 有 可 能 的 ActiveX 对 象 的 ID 列表 。 变 量 xhr 指 向 新 建 的 XHR 对 象 。 
然后 ， 我 们 的 代码 会 先 测试 一 下 XMLHttpRequest 对 象 ， 看 看 这 是 否 存 
在 。 如 果 是 ， 就 意味 着 当前 浏览 器 支持 XMLHttpRequest0 构 造 器 的 

(也 就 是 说 ， 该 浏览 器 是 较为 现代 的 浏览 器 ; 如 果 不 是 ， 那 么 代码 

就 得 通过 遍历 ids 中 的 可 能 项 来 尝试 着 创建 对 象 。catch(e) 则 可 以 捕获 其 
中 创建 失败 的 项 目 并 使 循环 继续 。 如 此 ， 只 要 有 一 个 XHR 对 象 被 成 功 
创建 ， 我 们 就 可 以 提前 退出 循环 。 

正如 您 所 见 ， 这 段 代码 有 点 长 ， 所 以 最 好 还 是 将 其 抽象 成 一 个 画 
数 。 实 际 上 ， 在 本 章 后 面 的 练习 题 中 就 有 一 题 要 求 我 们 创建 属于 我 们 
自己 的 AJAX 工 具 集 。 


7.6.4 A 代表 异步 


现在 ， 我 们 已 经 了 解 了 如 何 创建 一 个 XHR 对 象 ， 只 需 给 它 一 个 既 
定 的 URL， 然 后 处 理 相 关 的 请 求 啊 应 即 可 。 但 如 果 我 们 异步 发 送 了 两 
个 请 求 会 发 生 什 么 昵 ?或 者 说 ， 如 果 第 二 个 请 求 的 响应 先 于 第 一 个 请 
求 返回 会 发 生 什么 ? 

在 前 面 的 例子 中 ，XHR 对 象 都 是 属于 全 局 域 的 ，myCallback 要 根 
据 这 个 全 局 对 象 的 存在 状态 来 访问 它 的 readyState 、status 和 responseText 
属性 。 除 此 之 外 还 有 一 种 方法 ， 可 以 让 我 们 摆脱 对 全 局 对 象 的 依赖 ， 
那 束 是 将 我 们 的 回调 函数 封装 到 一 个 闭 包 中 去 。 下 面 我 们 来 看 看 具体 
如 何 做 : 

var xhr = new XMLHttpRequest(); 


xhr.onreadystatechange = (function(myxhr){ 


return function(){ 

myCallback(myxhr); 

}; 

D(xhr); 

xhr.open('GET', 'somefile.txt', true); 

xhr.send("); 

在 这 种 情况 下 ，myCallback 将 会 以 参数 的 形式 接收 相关 的 XHR 对 
象 ， 这 就 避免 使 用 全 局 空间 的 问题 。 同 时 ， 这 也 意味 着 当 该 请 求 再 次 
获得 啊 应 信息 时 ， 原 来 的 xhr 变 量 束 可 以 被 第 二 次 请 求 重用 了 。 因 为 我 
们 在 闭 包 内 保留 了 该 对 象 的 原 有 信息 。 


7.6.5 XX 代表 XML 


尽管 作为 数据 传输 格式 来 说 ， 最 近 JSON (我 们 会 在 下 一 章 中 介 
绍 ) 在 风头 上 已 经 盖 过 了 XML ， 但 XML 仍然 是 我 们 的 一 个 选择 。 除 了 
responseText 属 性 外 ，XHR 对 象 还 有 另 一 个 名 为 responseXML 的 属性 。 
如 果 我 们 同一 个 XML 文 档 发 送 一 个 HTTP 请 求 ， 该 属性 就 会 指 癌 该 
XML 的 DOM document 对 象 。 因 此 ， 对 于 该 文档 的 操作 ， 我 们 可 以 对 它 
调用 之 前 所 讨论 的 core DOM 方 法 ， 例 如 getElementsByTagName()、 
getElementByIdO 等 。 


7.6.6 实例 示范 


下 面 ， 让 我 们 通过 一 个 具体 的 实例 来 总 结 一 下 天 于 XHR 对 象 的 各 
种 话题 。 您 也 可 以 在 http://www.phpied.com/files/jsoop/xhr.html 中 找到 相 
关 页 面 ， 并 测试 该 示例 中 的 操作 。 

该 主页 xzhrhtm] 是 一 个 非常 简单 的 静态 页 面 ， 其 中 只 含有 三 个 <div> 
元 尼 : 


<div id="text">Text will be here</div> 

<div id="html">HTML will be here</div> 

<div id="xml]">XML will be here</div> 

然后 ， 我 们 在 控制 台中 输入 相关 代码 ， 疝 三 个 文件 发 送 请 求 ， 并 
将 它们 各 目的 内 容 载 入 相关 的 <div> 中 。 

这 三 个 文件 所 载 入 的 分 别 是 。 


content.txt 一 一 一 段 徐 单 的 文本 ， 内 容 为 "Iam a text file" 。 
content.html 一 一 段 HITML 代 码 ， 具 体 如 下 : 
"Iam <strong>formatted</strong> <em>HTML</em>" 
content.xml 一 一 一 个 XML 文档 ， 内 容 如 下 : 
<?xml version="1.0" ?> 
<root> 
Im XML data. 
</root> 


要 注意 的 是 ， 上 面 所 提 到 的 所 有 文件 都 与 xhr.html 存 在 同一 个 目录 
中 o 

出 于 安全 因素 ， 我 们 只 能 对 同一 个 域 使 用 XMLHttp-Request 请 求 文 
件 。 然 而 ， 现 代 浏 览 器 也 支持 XHR2， 它 支持 跨 域 请 求 ， 前 提 是 HTTP 
请 求 有 合适 的 Access- Control-Allow-Origin 头 信息 。 

我 们 先 来 提取 请 求 / 啊 应 部 分 的 功能 ， 创 建 画 数 如 下 : 


function request(url, callback) { 


var xhr = new XMLHttpRequest(); 
xhr.onreadystatechange = (function (myxhr) { 
return function () { 
if (myxhr.readyState === 4 && myxhr.status === 200) { 
callback(myxhr); 


}; 
}(xhr)); 
Xhr.open(CGET', url, true); 
xhr.send("); 
} 
该 贸 数 接受 两 个 参数 ， 一 个 是 我 们 所 请 求 的 URL， 男 一 个 则 是 啊 
应 返回 后 所 要 调用 的 回调 函数 。 接 下 来 ， 我 们 要 调用 三 次 该 函数 ， 
个 文件 一 次 ， 具 体 如 下 : 
request( 
'http:/www.phpied.com/files/jsoop/content.txt,', 
function(o){ 
document.getElementByld('text').innerHTML = 


o.responseText; 


); 
request( 
'http://www.phpied.com/files/jsoop/content.html,, 
function(o){ 
document.getElementByld(html').innerHTML = 


o.responseText; 


); 
request( 
'http://www.phpied.com/files/jsoop/content.xml, 
function(o){ 
document.getElementByld(xml').innerHTML = 
o.responseXML 


.getElementsByTagName('root')[0] 
.firstChild 
.nodeValue: 
} 
); 
在 这 里 ， 回 调 函 数 都 是 以 内 联 的 方式 来 定义 的 。 前 两 个 函数 的 实 
现 很 类 似 ， 它 们 都 只 需要 用 其 所 请 求 文件 中 的 内 容 奉 换 掉 相关 <div> 中 
的 HTML 文 本 即 可 。 第 三 个 函数 则 略 有 不 同 ， 因 为 它 涉及 一 个 XML 文 
档 。 首 先 ， 我 们 需要 通过 o.responseXML 调用 来 访问 该 XML 文档 的 
DOM 对 象 。 然 后 再 调用 getElementsByTagName0O 获取 页 面 中 所 有 
<root> 标 签 的 列表 〈 实 际 上 只 有 一 项 ) ，<root> 标 签 的 firstChild 是 一 个 
文本 节点 ， 所 以 我 们 用 其 nodeValue 属性 来 获取 这 段 文本 ( 即 “T'm XML 
data”) ， 并 用 它 替换 掉 <div id="xml"> 中 的 HTML 内 容 。 整 体 效 果 如 图 
7-14 所 示 : 


I am a text file 


1 am formatted HTML 


Tm XML data. 


图 7-14 
对 于 XML 文档 上 的 操作 ， 我 们 也 可 以 通过 调用 
o.responseXML.documentElement 来 获 取 <root> 元 素 ， 以 取代 
o.responseXML.getElementsByTagName(root)[0]  。 记 住 


documentElement 所 指 癌 的 就 是 一 个 XML 文 档 的 根 节 点 。 特 别 对 于 
HTML 文 档 来 说 ， 它 的 根 世 点 始终 都 是 <html> 标 签 。 


7.7 人 小结 


本 章 所 涉及 的 内 容 相当 多 。 首 移 ， 我 们 介绍 了 一 系列 跨 浏览 器 的 
BOM ( 浏 贤 器 对 象 模 型 )》 对 象 ， 其 中 主要 包括 : 
全 局 对 象 window 的 系列 属性 ， 例 如 navigator 、location 、history、 
frames 、screen 等 ; 
及 其 方法 ， 例 如 setInterval() 和 setTimeout(); alert()、confirm() 和 
prompt(); moveIo/By0O 和 resizeTo/By0O。 
然后 ， 我 们 介绍 了 有 关 DOM (文件 对 象 模型 ， 的 内 容 ， 这 是 一 个 
以 树 型 结构 来 表示 HTML (或 XML) 文档 的 方法 ， 其 中 的 每 一 个 标签 
或 文本 都 是 该 树 结构 上 的 节点 。 我 们 详细 介绍 了 以 下 几 点 。 
方太 访问 。 
通 过 parentNode 、 childNodes 、 firstChild 、 lastChild 、 
nextSibling、PpreviousSibling 这 些 市 有 父 / 子 天 联 性 的 属性 来 访问 。 
通过 getElementsByld() 、 getElementsByTagName() 、getElements 
ByName() 及 querySelectorAll() 等 方法 来 访问 。 
广 扩 修改 。 
通过 innerHTML 或 innerText/textContent 属性 来 进行 。 
通过 nodeValue 或 setAttribute() 以 及 对 象 属性 中 的 相关 属性 来 进 


一 


4 可 总 
通过 removeChild0 或 replaceChild0 来 移 除 点。 
以 及 通过 appendChild()、cloneNode()、insertBefore() 等 方法 来 添 
加 新 市 


汕 
O 


另外 ， 我 们 还 介绍 了 一 些 从 DOM 0 〈 这 是 正式 标准 化 之 前 的 产 
物 ) 中 移植 到 DOM Level 1 中 的 属性 ， 其 中 包括 以 下 几 部 分 。 

一 系列 集合 对 象 。 例 如 document 对 象 的 forms、images、1links、 
anchors 以 及 applets 。 但 相对 来 说 ， DOM 1 中 的 
getElementsByTagName0 显 然 更 为 灵活 实用 。 

document.body， 这 是 一 种 能 方便 访问 <body> 元 素 的 特定 属性 。 

男 外 ， 我 们 还 介绍 了 document 中 的 title 、cookie 、referrer 、 
domain 四 大 特殊 属性 。 

接着 ， 我 们 为 您 介绍 了 浏览 右 事 件 的 传播 方式 。 尽 管 它们 要 实现 
跨 浏 览 右 模式 并 不 容易 ， 但 也 是 完全 有 可 能 的 。 由 于 事件 是 以 冒 泡 形 
式 传播 的 ， 因 此 ， 我 们 可 以 将 监听 任务 设置 得 更 全 局 化 。 画 外 ， 我们 
还 介绍 了 如 何 阻 断 事件 的 传播 路 径 ， 以 及 如 何 改变 其 默认 行为 。 

最 后 ， 我 们 还 学 习 了 有 关 XMLHttpRequest 对 象 的 知识 ， 该 对 象 也 
人 允许 我 们 构建 一 个 具有 即时 啊 应 能 力 的 Web 页 面 ， 主 要 分 为 两 个 步骤 。 

首先 ， 癌 服务 絮 发 送 HTTP 请 求 ， 以 获得 相关 数据 。 

然后 ， 处 理 服务 器 的 响应 信息 ， 并 更 新 页 面 中 的 相关 部 分 。 


7.8 东 习 题 


在 本 章 之 前 ， 我 们 的 练习 题 都 是 可 以 在 各 自 章节 的 正文 中 找到 解 
决 方案 的 。 但 这 一 次 ， 您 会 发 现 有 些 练 习题 需要 我 们 对 本 书 以 外 的 内 
容 有 更 多 的 了 解 (或 实践 经 验 ) 。 

1. BOM 

作为 BOM 的 练习 来 说 ， 我 们 可 以 试 着 写 出 许多 错误 的 、 富 有 骚扰 
性 的 、 对 用 户 非 常 不 友好 的 代码 ， 以 及 所 有 非常 Web 1.0 的 东西 。 例 如 
晃动 的 浏览 右 窗 口 。 请 试 着 令 浏 览 器 弹出 一 个 200 x 200 的 窗口 ， 然 后 


将 其 大 小 渐变 成 400 x 400， 接 着 将 窗口 上 下 左右 不 停 移动 ， 造 成 地 震 
效果 。 为 了 实现 这 种 效果 ， 我 们 需要 move*() 芳 数 ， 其 中 需要 一 次 或 多 
次 调用 setInterval()， 最 后 可 能 还 需要 setTimeout() 及 clearInterval(0) 来 令 其 
停止 操作 。 或 者 我 们 可 以 更 简单 一 些 ， 将 当前 日 期 时 间 通 过 
document.title 实 时 显示 在 浏 贤 絮 的 标题 栏 中 ， 并 像 钟表 一 样 每 秒 钟 更 新 
一 次 。 

2. DOM 

换 一 种 不 同 的 方式 来 实现 walkyDOM0O 方 法 ， 以 回调 函数 参数 的 形 
式 来 代替 console.log0O 硬 编码 。 

使 用 innerHTML 来 移 除 相关 内 容 确 实 很 方便 ( 即 
document.body.innerHTML ="") ， 但 未 必 总 是 最 好 的 选择 。 如 果 在 其 
中 有 元 素 被 设置 了 事件 监听 器 ， 那 么 当 该 元 素 被 移 除 时 ，IE 并 不 会 解 
除 该 元 素 与 监听 如 之 间 的 关联 。 这 就 有 可 能 会 导致 浏览 絮 中 内 存 汇 
漏 ， 因 为 它们 所 引用 的 内 容 已 经 不 存在 了 。 因 此 ， 请 你 实现 一 个 通用 
的 移 除 DOM 和 点 的 函数 ， 它 会 在 移 除 和 点 的 同时 移 除 相关 的 事件 监听 
细 。 你 可 以 台历 目标 市 点 的 属性 ， 检 查 这 些 属性 值 是 否 属于 函数 类 
型 ， 如 果 是 (例如 最 常见 的 ondlick 属 性 ) ， 你 就 需要 在 该 元 素 节 点 被 
删除 之 前 将 该 属性 设置 为 null 。 

创建 一 个 叫做 include() 的 函数 ， 该 函数 可 以 按 需 将 外 部 脚本 引入 当 
前 页 面 。 你 可 以 首先 动态 创建 一 个 新 的 <script> 标 签 ， 然 后 设置 其 src 
属性 ， 再 将 它 插入 到 <head> 标 俭 末 端 。 该 函数 应 通过 如 下 测试 : 

> include('somescript.js'); 

3. 事件 

创建 一 个 叫做 myevent 的 跨 浏 览 器 事件 工具 集 (或 对 象 集 ) ， 其 中 
应 该 包含 以 下 方法 。 

addListener(element, event_name, callback) 一 一 其 中 的 element 参 数 


也 可 以 是 一 个 元 素数 组 。 


removeListener(element, event_name, callback) ° 
对 于 下 的 早期 版 本 ， 我 们 可 以 通过 检查 
window.event 属 性 来 实现 。 

getTarget(event) ° 


getEvent(event) 


stopPropagation(event) ° 
preventDefault(event) ° 
其 用 例如 下 : 
function myCallback(e) { 
e = myevent.getEvent(e); 
alert(myevent.getTarget(e).href); 
myevent.stopPropagation(e); 
myevent.preventDefault(e); 
} 
myevent.addListener(document.links, 'dlick', myCallback); 
执行 这 段 示例 代码 应 该 会 使 该 文档 中 所 有 的 链接 失效 ， 只 不 过 ， 
它们 在 被 单 击 时 会 弹出 一 个 alert0 窗 口 ， 以 显示 其 href 属 性 。 
创建 一 个 以 像素 定位 的 <div> 元 素 ， 坐 标 为 x=100 px，y=100 px。 
然后 编写 代码 使 <div> 元 素 能 按照 以 下 按键 ]( 左 ) 、K ( 右 ) 、M 
(下 ) 、I (上 ) 或 对 应 方向 键 的 操作 方式 在 页 面 中 移动 。 并 且 ， 在 编 
写 过 程 中 可 以 重用 您 刚刚 实现 的 事件 工具 集 。 
4. XMLHttpRequest 对 象 
创建 一 个 名 为 ajax 的 XHR 工 具 集 (或 对 象 集 ) ， 其 示例 用 法 如 下 : 
function myCallback(xhr) { 


alert(xhr.responseText); 
} 
ajax.request('somefile.txt', 'get', myCallback); 
ajax.request('script.php', 'post', myCallback,first=John&xlast=Smith ); 


[2] .这 


document.referrer 中 


8 时 模式 与 设计 模 了 


到 目前 为 止 ， 我 们 已 经 掌握 了 JavaScript 的 面 回 对 象 特性 ， 如 原型 
和 继承 ， 并 且 接 触 了 一 些 使 用 浏览 右 对 象 的 实例 。 接 下 来 ， 我 们 将 介 
绍 一 些 JavaScript 中 的 常用 模式 及 其 使 用 方法 。 

首先 什么 是 模式 ? 简单 地 说 ， 模 式 束 是 专门 为 菜 些 常见 问题 开发 
的 、 优 秀 的 解决 方案 。 

通常 ， 当 我 们 面 对 一 个 新 的 编程 问题 时 ， 往 往 会 发 现 眼 前 的 这 个 
问题 与 我 们 之 前 解决 过 的 某 个 问题 有 很 多 相似 之 处 。 这 时 候 ， 您 或 许 
就 可 以 考虑 将 这 些 问 题 抽 象 归 类 ， 以 寻求 一 个 通用 性 的 解决 方案 。 而 
所 谓 模式 ， 实 际 上 残 是 一 系列 经 过 实践 证 明 的 、 针 对 某 类 问题 鸣 、 有 具 
有 可 重用 性 的 解决 方案 〈 或 者 是 寻求 解决 方案 的 方法 ) 。 

有 时 候 ， 模 式 仅 仅 是 一 个 用 于 帮助 我 们 思考 的 想法 或 名 字 。 例 
如 ， 当 您 与 团队 中 其 他 开发 人 员 讨论 某 类 问题 或 方案 时 ， 模 式 可 以 被 
当做 一 个 术语 来 使 用 ， 以 使 交流 变 得 更 容易 一 些 。 

而 有 时 候 我 们 所 面 对 的 问题 可 能 要 更 特殊 一 些 ， 以 至 于 可 能 根本 
找 不 到 任何 适用 的 模式 。 这 时 候 ， 切 忌 盲 目 使 用 模式 ， 生 搬 硬 套 在 任 
何 时 候 都 不 是 一 个 好 主意 。 因 为 在 这 种 情况 下 ， 往 往 不 使 用 模式 要 比 
为 了 套用 某 个 现 有 模式 而 去 强行 改变 问题 本 身 要 好 得 多 。 

在 本 划 ， 我 们 将 讨论 的 模式 主要 分 为 两 大 类 : 

编程 模式 (coding pattern) 一 些 专 门 为 JavaScript 语言 开发 出 
的 最 佳 实践 方案 ; 


设计 模式 (design pattern ) 这 些 模 式 与 具体 语言 无 关 ， 它 们 
主要 来 自 那 本 著名 的 GoF 所 著 的 《设计 模式 》 绩 一 书 。 


8.1 编程 模式 


在 本 章 的 第 一 部 分 中 ， 我 们 首先 要 讨论 一 些 与 JavaScript 语言 特 
性 密切 相关 的 模式 。 其 中 有 些 模式 主要 用 来 组 织 代 码 (如 命名 空间 模 
式 ) ， 有 些 则 与 性 能 改善 有 关 〈 如 延迟 定义 和 初始 化 时 分 文 ) ， 还 有 
些 会 涉及 一 些 JavaScript 语言 缺失 的 特性 〈 比 如 私有 属性 ) 。 总 而 言 
之 ， 本 市 将 讨论 以 下 几 种 模式 : 

行为 隔离 ; 

命名 空间 ; 

初始 化 分 文 ; 

延迟 初始 〈 惰 性 初始 ) ; 

配置 对 象 ; 

私有 变量 和 方法 ; 

特权 方法 ; 

私有 豆 数 的 公有 化 ; 

即时 函数 ; 

链 式 调用 ; 

JS9ON。 


8.1.1 行为 隔离 


正如 我 们 所 知 ， 一 个 网 页 通常 有 三 个 要 素 : 
内 容 (HTML) : 


外 观 (CSS) ; 

行为 (JavaScript) 

8.1.1.1 内 容 

HTML 所 代表 的 是 网 页 的 内 容 ， 也 就 是 文字 。 理 想 状况 下 ， 内 容 
的 HTML 标签 应 该 尽量 精简 ， 而 又 能 恰到好处 地 组 织 内容 的 语义 。 例 
如 <ul> 和 <li> 标 签 可 用 于 导航 沫 单 ， 因 为 后 者 只 是 一 组 链接 而 已 。 

通常 情况 下 ， 内 容 (HTML) 中 是 不 应 该 包含 格式 化 元 素 的 。 可 
钢化 格式 之 类 的 元 素 应 该 属于 外 观 层 的 东西 ， 通 常 交 由 CSS 来 实现 ， 
这 意味 着 我 们 应 该 : 

尽量 避免 在 HTML 标 签 中 使 用 style 属性 ; 

不 要 使 用 与 外 观 有 关 的 HTML 标 签 ， 例 如 <font>; 

尽量 根据 语义 需要 来 选择 标签 ， 而 不 是 去 考虑 浏览 器 会 如 何 绘制 
它们 。 例 如 ， 开 发 人 员 有 时 候 对 <div> 标 签 的 使 用 实际 上 不 如 <p> 标 签 
来 得 更 合适 。 同 理 ， 我 们 应 该 更 多 地 使 用 <strong> 和 <em> 而 不 是 <b> 
和 <i>， 因 为 后 者 更 强调 的 是 外 观 而 不 是 语义 。 

8.1.1.2 外 观 

要 将 外 观 与 内 容 分 开 ， 有 一 种 好 方法 就 是 对 浏览 剧 默 认 的 绘制 行 
为 进行 重 置 ， 例 如 YUI 库 中 的 reset.css。 这 样 一 来 ， 浏 览 器 默认 的 绘制 
方式 就 不 会 影响 我 们 对 语义 标签 的 选择 了 。 

8.1.1.3 行为 

网 页 中 的 第 三 要 素 是 行为 。 行 为 也 应 该 做 到 与 内 容 及 外 观 分 离 。 
行为 通常 是 由 JavaScript 人 负责 定义 的 ， 且 只 由 <script> 标 签 来 标记 。 这 些 
脚本 代码 最 好 被 存放 在 外 部 文件 中 。 这 意味 着 我 们 使 用 的 不 是 类 似 于 
onclick, onmouseover 这 样 的 内 崩 属 性 ， 而 是 利用 前 几 间 中 曾经 介绍 过 
的 addEventListenerattachEvent 方 法 来 进行 事件 定义 。 

天 于 行为 与 内 容 的 隔离 ， 我 们 通常 有 以 下 几 条 原则 性 策略 。 


尽 可 能 少 用 <script> 标 签 。 


尽量 不 要 使 用 内 骸 事 件 的 处 理 方法 。 

尽量 不 要 使 用 CSS 表 达 式 。 

当 JavaScript 被 用 户 禁 用 时 ， 我 们 要 动态 地 添加 一 些 表示 无 目标 的 
替换 标记 。 

在 内 容 末 尾 、<body> 标 签 之 有 前， 搬入 一 个 externaljs 文件 。 

8.1.1.4 行为 隔离 实例 

下 面 ， 假 设 我 们 有 一 个 搜索 表单 ， 该 表单 中 的 内 容 需要 通过 
JavaScript 来 验证 。 在 这 里 ， 我 们 没有 在 form 标 签 内 使 用 任何 
JavaScript 代码 ， 而 只 是 在 <body> 标签 结束 之 前 插入 一 个 <script> 标 
签 ， 并 令 其 指向 一 个 外 部 脚本 文件 。 

<body> 


<form id="myform" method="post" action="server.php"> 
<fieldset> 
<legend>Search</legend> 
<input 
name="search" 
id="search" 
type= "text" 
/> 
<input type="submit" /> 
</fieldset> 
</form> 
<scriptsrc="behaviors.js"></script> 
</body> 
而 在 behaviors.js 文 件 中 ， 我 们 为 submit 事 件 设 定 了 一 个 处 理 方法 ， 
用 以 检查 输入 文本 框 是 否 为 空 。 帮 为 空 ， 则 不 提交 表格 。 这 样 的 设计 


会 节省 一 次 客户 端 与 服务 端 之 间 的 通信 ， 应 用 也 会 根据 输入 马上 做 出 
响应 。 
以 下 是 behaviors.js 的 完整 实现 ， 在 其 中 ， 我 们 用 到 了 前 一 章 练习 
题 中 所 实现 的 myevent 工 具 : 
// init 
myevent.addListener(myform,', 'submit', function(e){ 
// no need to propagate further 
e = myevent.getEvent(e); 
myevent.stopPropagation(e); 
// validate 
var el = document.getElementById(search ); 
if (lel.value) { /too bad, field is empty 
myevent.preventDefault(e); / prevent the form submission 
alert('Please enter a search string'); 
月); 
8.1.1.5 异步 的 JavaScript 代码 载 入 
在 这 个 例子 中 ， 我 们 注意 到 ，<script> 标 签 被 放置 在 <body> 元 素 的 
最 末 。 这 么 做 是 因为 载 入 JavaScript 代 码 的 过 程 会 阻塞 页 面 DOM 的 构 
建 ， 甚 至 在 某 些 浏览 器 中 ， 一 些 需 要 下 载 的 组 件 也 会 被 阻塞 。 将 
<Sscript> 移 动 到 页 面 底 部 可 以 确保 它 不 会 形成 阻塞 ， 并 且 这 段 JavaScript 
被 载 入 后 只 会 增强 这 个 基本 功能 已 经 完整 的 页 面 。 
另 一 种 防止 外 部 JavaScript 文 件 阻塞 页 面 的 方法 是 将 它们 异步 载 入 
页 面 。 这 么 做 的 话 ， 我 们 就 可 以 早 一 些 开始 载 入 它们 。HTML5 为 此 近 
供 了 defer 属 性 : 


<script defer src=”behaviors.js”></script> 


不 笠 的 是 ， 老 式 浏 览 右 并 不 文 持 defer 必 性。 但 还 好 我 们 有 另 一 种 
器 浏 蜗 絮 的 方法 来 解决 这 一 问题 ， 并 且 这 种 方式 新 老 浏 览 器 都 能 接 
受 。 这 种 方式 就 是 动态 创建 script 广 点 ， 然 后 将 它 插入 DOM 。 换 句 话 
说 ， 我 们 需要 使 用 一 些 内 联 JavaScript 代码 来 载 入 外 部 JavaScript 文 
件 。 这 段 代 码 可 以 放 在 文档 的 顶部 ， 这 样 一 来 外 部 JavaScript 文 件 束 会 
早 一 些 被 载 入 : 


<head> 
(function () { 
var s = document.createElement('script'); 
S.STC = ‘behaviors.js'; 
document.getElementsByJIagName(head')[0].appendChild(s); 
10); 
</head> 


8.1.2 命名 空间 


为 了 减少 命名 冲突 ， 我 们 通常 都 会 尽量 减少 使 用 全 局 变量 的 机 
会 。 但 这 并 不 能 根本 解决 问题 ， 更 好 的 办 法 是 将 变量 和 方法 定义 在 不 
同 的 命名 空间 中 。 这 种 方法 的 实质 就 是 只 定义 一 个 全 局 变量 ， 并 将 其 
他 变量 和 方法 定义 为 该 变量 的 属性 。 

8.1.2.1 将 对 和 象 用 做 命名 空间 

上 首先， 我 们 来 新 建 一 个 全 局 变量 MYAPP: 

// global namespace 

var MYAPP = MYAPP || {}; 


然后 ， 我 们 为 MYAPP 设 置 属性 event， 用 它 来 代 克 上 一 章 练习 题 中 
实现 的 myevent 全 局 工具 对 象 : 
// Sub-object 
MYAPPevent = { 
为 其 添加 方法 : 
// object together with the method declarations 
MYAPPevent = { 
addListener: function(el, type, fn) { 
//.. do the thing 
removeListener: function(el, type, fn) { 
//... 
汪 
getEvent: function(e) { 
//... 
} 
// ... other methods or properties 
}; 
8.1.2.2 命名 空间 中 的 构造 器 应 用 
我 们 也 可 以 在 命名 空间 中 使 用 构造 右 函 数 。 在 本 例 中 ，DOM 工 
具 本 号 束 定义 了 一 个 Element 构 造 器 ， 通 过 它 我 们 可 以 很 方便 地 创建 
DOM 元 素 。 
MYAPP.dom = {}: 
MYAPP.dom.Element = function (type, properties) { 
var tmp = document.createElement(type); 
for (var i in properties) { 


if (properties.hasOwnProperty(i)) { 


tmp.setAttribute(i, properties[i]); 


return tmp; 
上 
同样 的 ， 您 也 可 以 用 Text 构 造 器 来 创建 文本 类 市 点 : 
MYAPP.dom.Text = function(txt){ 

return document.createTextNode(txt); 
从 
然后 使 用 该 构造 器 在 网 页 确 部 创建 一 个 链接 : 
var link = new MYAPP.dom.Element('a, 

{href: 'http://phpied.com,', target: '_blank'}); 
var text = new MYAPP.dom.Text('click me'); 
link.appendChild(text); 
document.body.appendChild(link); 
8.1.2.3 namespace() 方 法 
我 们 可 以 实现 一 个 名 为 namespace 的 工具 方法 ， 来 简化 我 们 的 工 
其 调用 方法 很 向 单 : 
MYAPP.namespace('dom.style'); 
这 等 价 于 : 
MYAPP.dom = {}: 
MYAPP.dom.style = {}; 
下 面 ， 我 们 来 看 看 这 个 namespace0 方 法 是 如 何 实现 的 。 首 先 ， 我 
们 创建 一 个 数组 ， 用 于 存放 由 “分 割 的 输入 字符 串 ; 然后 将 该 数组 中 
的 每 个 元 素 都 添加 为 全 局 对 象 的 属性 。 

Var MYAPP = {}; 


MYAPP.namespace = function (name) { 


作 


O 


var parts = name.split('."); 
var current = MYAPP; 
for (var i = 0; i < parts.length; i++) { 
if (!current[parts[i]]) { 
current[parts[i]] = {}; 
} 
current = current[parts[i]j; 
1 
}; 
测试 一 下 新 的 方法 : 
MYAPP.namespace('event'); 
MYAPP.namespace('dom.style'); 
上 述 代 码 等 价 于 以 下 调用 : 


var MYAPP = { 

event: {}, 

dom: { 

style: {} 

} 

} 
8.1.3 初始 化 分 支 

我 们 在 上 曾经 提 到 过 ， 不 同 的 浏览 器 对 于 相同 或 相似 的 方法 


可 能 有 不 同 的 实现 。 这 时 ， 您 需要 依据 当前 的 浏览 器 的 支持 方式 来 先 
择 对 应 的 执行 分 支 。 这 类 分 支 可 能 有 很 多 ， 因 而 可 能 会 减缓 脚本 执行 
速度 。 


但 非 要 等 到 运行 时 才能 分 文 吗 ? 我 们 完全 可 以 在 加 载 脚本 时 ， 在 
模块 初始 化 的 过 程 中 就 将 部 分 代码 进行 分 支 处 理 。 这 显然 更 有 利于 提 
高 效率 。 利 用 JavaScript 代码 可 以 动态 定义 的 特性 ， 我 们 可 以 为 不 同 
的 浏 哎 如 定 制 不 同 的 实现 方法 。 下 面 我 们 来 看 一 个 具体 示例 。 
首先 ， 我 们 定义 一 个 命名 空间 并 声明 了 一 些 事 件 处 理 方法 。 
var MYAPP = {}: 

MYAPP.event={ 
addListener: null, 
removeListener: null 
; 
注意 ， 此 时 无 论 是 添加 还 是 删除 事件 监听 的 方法 都 还 没有 被 定 
它们 将 根据 具体 的 浏览 器 特 性 探测 的 结果 ， 被 赋予 不 同 的 实现 。 


让 (window.addEventListener) { 


Xe 


MYAPP.event.addListener = function(el, type, fn) { 
el.addEventListener(type, fn, false); 

}; 

MYAPP.event.removeListener = function(el, type, fn) { 
el.removeEventListener(type, fn, false); 

上 

} else if (document.attachE.vent){ // IE 

MYAPP.event.addL istener = function(el, type, fn) { 
el.attachEvent('on' + type, fn); 

}; 

MYAPP.event.removeListener = function(el, type, fn) { 
el.detachEvent('on' + type, fn); 

忆 


} else { // older browsers 


MYAPP.event.addListener = function(el, type, fn) { 
el['on + type] = fn; 

MYAPPevent.removeListener = function(el, type, fn) { 
el['on' + type] = null; 

1 

} 

一 旦 上 壕 脚 本 被 执行 ,我们 就 定义 了 与 浏览 器 特性 相关 的 
addListener() 和 removeListener() 方 法 。 如 此 ， 当 它们 再 次 被 调用 时 ， 就 
不 需要 再 探测 浏览 絮 特 性 了 ， 脚 本 会 执行 得 更 快 。 

要 提醒 的 是 ， 在 检查 浏览 器 特性 时 ， 请 尽量 不 要 对 一 个 特性 做 过 
多 的 假设 。 在 上 例 中 ， 我 们 就 没有 遵从 这 一 原则 。 因 为 我 们 只 检查 了 
浏览 需 对 addEventListener 方法 的 文 持 ， 然 后 就 直接 定义 了 相应 的 
addListener() 和 removeListener() 方 法 。 在 这 个 例子 中 ， 我 们 合理 地 假设 
一 个 浏 贤 器 如 果实 现 了 addEventListener()， 那 么 它 当 然 也 会 同时 实现 
removeEventListener() 方 法 。 但 请 想象 一 下 ， 如 果 浏 览 絮 只 实现 了 
stopPropagation0 ， 却 没有 实现 preventDefaultO) 方 法 ， 而 我 们 又 没有 对 
它们 分 别 检测 ， 会 导致 什么 后 果 ? 男 一 方面 ， 我 们 很 可 能 在 发 现 
addEventListener() 方 法 没有 被 定义 后 ， 想 当然 地 认为 这 个 浏览 器 肯 害 
是 低 版 本 的 下 ， 结 果 又 导致 我 们 必须 为 正 浏 贤 器 编写 专用 的 处 理 函 
数 。 请 记 住 ， 这 些 代 码 可 能 会 在 目前 正中 正常 工作 ， 但 不 等 于 今后 的 
版 本 也 一 样 。 为 了 避免 和 目 定义 函数 在 新 版 本 浏览 右 可 能 会 增加 的 功 
能 ， 我 们 应 该 单独 检测 每 个 可 能 会 用 到 的 浏览 器 特性 ， 千 万 不 要 只 做 
一 些 泛泛 的 假设 。 


8.1.4 惰性 初始 


惰性 初始 模式 与 上 面 的 初始 化 分 支 模 式 很 相似 。 不 同 之 处 在 于 ， 
该 模式 下 的 分 文 只 有 在 相关 函数 第 一 次 被 调用 时 才 会 发 生 一 即 只 有 画 
数 被 调用 时 ， 它 才 会 以 最 佳 实现 改写 自己 。 在 初始 化 分 文 模式 中 ， 模 
块 初 始 化 时 证 分 文 必 然 会 发 生 ， 而 在 惰性 初始 模式 中 ， 这 可 能 根本 残 
不 会 发 生 一 一 因为 某 些 函数 可 能 永远 不 会 被 调用 。 同 时 ， 惰 性 初始 模 
式 也 会 使 得 初始 化 过 程 更 为 轻 量 ， 因 为 不 需要 再 做 分 支 检测 。 

接 下 来 ， 我 们 通过 一 个 addListener0 方 法 定义 来 演示 一 下 这 个 模 
式 。 该 方法 将 以 泛 型 的 方式 来 实现 一 一 即 在 它 第 一 次 被 调用 时 ， 百 先 
会 检查 浏 充 融 文 持 的 功能 ， 然 后 为 目 己 选 择 最 合适 的 实现 ， 最 后 调用 
目 喘 以 完成 真正 的 事件 添加 。 当 下 一 次 再 调用 该 方法 时 ， 融 会 直接 调 
用 它 选择 的 新 方法 而 不 再 需要 做 分 支 判 断 。 作 为 例子 ， 实 现 如 下 : 

var MYAPP = {}; 

MYAPPmyevent = { 

addListener: function(el, type, fn){ 
if (el.addEventListener) { 
MYAPPmyevent.addListener = function(el, type, fn) { 


el.addEventListener(type, fn, false); 
上 
} else if (el.attachEvent){ 
MYAPPmyevent.addListener = function(el, type, fn) { 
el.attachEvent('on' + type, fn); 
上 
} else { 
MYAPPmyevent.addListener = function(el, type, fn) { 
el[on + type] = fn:; 
有 


MYAPPmyevent.addListener(el, type, fn); 
} 
所 


8.1.5 配置 对 象 


该 模式 往往 适用 于 有 很 多 个 参数 的 函数 或 方法 。 但 关于 “很 多 ”的 
理解 ， 每 个 人 可 能 都 不 一 样 ， 但 一 般 来 说 ， 当 一 个 函数 的 参数 多 于 三 
个 时 ， 使 用 起 来 瓯 多 少 会 有 些 不 太 方 便 ， 因 为 我 们 不 太 容 易 记 住 这些 
参数 的 顺序 ， 尤 其 是 当 其 中 还 有 默认 参数 存在 的 时 候 。 

但 我 们 可 以 用 对 象 来 代替 多 个 参数 。 也 就 是 说 ， 让 这 些 参数 都 成 
为 某 一 个 对 象 的 属性 。 这 在 面 对 一 些 配置 型 参数 时 会 显得 尤为 适合 ， 
因为 它们 中 往往 存在 多 个 缺 省 参数 。 简 而 言 之 ， 用 单个 对 象 来 奉 代 多 
个 参数 有 以 下 几 点 优势 ; 

不 用 考虑 参数 的 顺序 。 

可 以 跳 过 某 些 参数 的 设置 。 

函数 的 扩展 性 更 强 ， 可 以 适应 将 来 的 扩展 需要 。 

代码 的 可 读 性 更 好 ， 因 为 在 代码 中 我 们 看 到 的 是 配置 对 象 的 属性 
名 称 。 

下 面 ， 假 设 我 们 有 一 个 UI 组 件 的 构造 器 ， 通 过 调用 该 构造 器 残 可 
以 创建 好 看 的 按钮 。 它 的 参数 包括 一 段 文 本 ， 即 按钮 的 显示 内 容 

(<input> 标 签 的 value 属性 ) ， 和 一 个 可 缺 省 的 type 人 参数 。 第 一 步 ， 
我 们 先 从 一 个 常规 的 按钮 开始 。 代 码 如 下 : 


// a constructor that creates buttons 


MYAPP.dom.FancyButton = function (text, type) { 
var b = document.createElement(input ); 


b.type = type || Submit ; 


b.value = text; 
return b; 
上 
该 构造 侣 很 傈 单 ， 只 需要 传递 给 它 一 个 字符 串 ， 然 后 就 可 以 把 新 
创建 的 按钮 加 入 文档 : 
document.body.appendChild( 
new MYAPP.dom.FancyButton(puuush') 
); 
到 目前 位 置 一 切 看 起 来 都 很 好 ， lo. 我 们 需要 为 按钮 设置 
更 多 属性 ， 例 如 颜色 和 字体 。 结 果 ， 这 个 构造 右 的 定义 最 终 束 可 能 会 
变 成 这 样 : 
MYAPP.dom.FancyButton = 
function(text, type, color, border, font) { 
Mss: 


这 显然 就 不 太 方 便 了 ， 比 如 当 我 们 可 能 只 想 设 置 第 三 个 和 第 五 个 
参数 ， 而 跳 过 第 二 个 和 第 四 个 时 ， 束 必须 这 样 : 
new MYAPP.dom.FancyButton( 
‘puuush’, null, "white', null,'Arial'); 
这 时 候 ， 更 好 的 选择 就 是 用 一 个 可 配置 对 象 参数 来 代替 所 有 的 参 
数 配 置 ， 这 样 一 来 ， 芳 数 定义 看 起 来 就 可 能 是 这 样 : 
MYAPP.dom.FancyButton = function(text, conf) { 
var type = conf.type || Submit ; 
var font = conf.font || "Verdana ; 
/ss 
} 
其 使 用 方法 如 下 : 


var config = { 
font: 'Arial, Verdana, sans-serif', 
color: "white' 

上 

new MYAPP.dom.FancyButton(Puuush', config); 

济 二 全 例 卫 : 

document.body.appendChild( 

new MYAPP.dom.FancyButton('dude', {color: 'red'}) 

); 

如 您 所 见 ， 我 们 可 以 方便 地 设置 部 分 参数 ， 并 可 以 随意 改变 参数 
设置 的 顺序 。 同 时 ， 由 于 我 们 是 通过 名 字 来 设置 参数 的 ， 因 此 代码 也 
显得 更 易 读 、 更 友好 。 

这 一 优点 同时 也 是 此 模式 的 一 大 缺点 ， 它 有 可 能 导致 对 此 模式 的 
滥用 。 设 计 者 可 能 会 以 此 为 借口 ， 不 加 杜 别 地 乱 添 加 参数 ， 而 其 中 某 
些 参数 不 完全 是 默认 的 ， 某 些 义 依赖 于 其 他 参数 。 

作为 一 个 经 验 法 则 ， 这 些 参数 都 应 该 吓 独 立 且 可 迁 的 。 如 果 在 画 
数 中 ， 我 们 必须 为 这 些 参数 的 组 合 检查 各 种 可 能 性 (“ 晨 ，A 参 数 被 设 
置 了 了， 但 A 参数 只 有 在 B 参 数 被 设置 时 才 有 效 ”) ， 那 么 这 种 方法 就 可 
能 导致 贸 数 体 过 于 胱 肿 ， 难 以 维护 与 测试 ， 因 为 其 可 能 的 组 合 太 多 
于 o 


8.1.6 私有 属性 和 方法 


在 JavaScript 中 ， 我 们 没有 可 以 用 于 设置 对 象 属性 访问 权限 的 修 
饰 符 。 但 一 般 语言 通 第 有 以 下 访问 修饰 符 : 
对 象 的 属性 (或 方法 ) 可 以 被 所 有 人 访问 。 
只 有 对 象 目 己 可 以 访问 这 些 属性 。 


public 


private 


protected 一 一 仅 该 对 象 或 其 继承 者 才能 访问 这 些 属性 。 
尽管 JavaScript 中 没有 特殊 的 语法 来 标记 私有 属性 ， 但 是 根据 第 3 
章 : 函数 ， 我 们 可 以 在 构造 器 中 通过 使 用 局 部 变量 和 函数 的 方式 来 实 
现 类 似 的 权限 控制 。 
下 面 继续 以 FancyButton 构 造 器 为 例 ， 我 们 为 它 定 义 了 一 个 styles 局 
部 变量 ， 用 于 表示 所 有 的 默认 样式 参数 ， 并 且 还 定义 了 一 个 setStyles() 
的 局 部 方法 。 该 变量 和 方法 对 于 构造 侣 之 外 的 代码 来 说 是 不 可 见 的 。 
下 面 ， 我 们 将 为 您 演示 FancyButton 对 象 是 如 何 使 用 这 些 局 部 的 私有 属 
性 的 : 
Var MYAPP = {}; 
MYAPP.dom = {}: 
MYAPP.dom.FancyButton = function(text, conf) { 
Var styles = { 
font: "Verdana,, 
border: '1px solid black,, 
color: 'black,, 
background: 'grey' 
上 
function setStyles(b) { 
Var i; 
for (i in styles) { 
if (styles.hasOwnProperty(i)) { 
b.styleli] = confli] || styles[i]; 
} 


} 


conf = conf || {}; 


var b = document.createElement(input ); 

b.type = conf.type || Submit'; 

b.value = text; 

setStyles(b); 

return b; 
}; 
在 这 上段 代码 中 ，styles 是 一 个 私有 属性 ， 而 setStyles0 则 是 一 个 私 
有 方法 。 构 造 器 可 以 在 内 部 调用 它们 (它们 也 可 以 访问 构造 器 中 的 任 
何 对 象 ) ， 但 它们 却 不 能 被 外 部 代码 所 调用 。 


8.1.7 落 
特权 函数 (这 个 概念 是 由 Douglas Crockford 提出 的 ) 实际 上 只 是 
一 些 普 通 的 公共 函数 ， 但 它们 却 可 以 访问 对 象 的 私有 方法 或 属性 。 其 


作用 束 像 一 座 桥梁 ， 将 私有 特性 以 一 种 可 挥 的 方式 暴露 给 外 部 使 用 
者 。 


8.1.8 私有 画 数 的 公有 化 


假设 我 们 定义 了 一 个 函数 ， 但 并 不 想 让 外 界 修 改 它 ， 于 是 将 其 设 
为 私有 。 但 有 时候 我 们 又 希望 让 某 些 外 部 代码 能 访问 到 它 ， 这 该 如 何 
实现 呢 ? 解决 方案 是 将 这 个 私有 函数 赋值 给 一 个 公有 属性 。 

下 面 ， 我 们 将 _setStyle0 和 _getStyle0 定 义 为 私有 方法 ， 但 同时 又 
将 它们 分 别 赋值 给 公有 方法 setStyle0 和 getStyle0): 

var MYAPP = {}; 

MYAPP.dom = (function(O){ 


var _setStyle = function(el, prop, value) { 


console.log('setStyle'); 


上 
var _getStyle = function(el, prop) { 
console.log('getStyle'); 
上 
return { 
setStyle: _setStyle, 
getStyle: _getStyle, 
yetAnother: _setStyle 
上 
}0); 
在 这 种 情况 下 ， 当 MYAPP.dom.setStyle0 被 调用 时 ，_setStyle0) 也 
会 被 调用 。 也 可 以 在 外 面 改 写 setStyles0) 方 法 : 
MYAPP.dom.setStyle = function(){alert('b'");}; 
也 融 是 说 : 
MYAPP.dom.setStyle 指向 的 是 新 的 方法 ; 
MYAPP.dom.yetAnother 仍然 指 | 同 _setStyle(); 
_setStyle() 方 法 随时 可 以 被 内 部 的 代码 调用 。 
当 我 们 暴露 私有 方法 与 属性 时 ， 请 记 住 ， 对 象 (函数 及 数组 也 是 
对 象 ) 传递 的 方式 为 引用 传递 ， 所 以 对 象 可 以 从 外 部 被 修改 。 


8.1.9 即时 函数 


另 一 个 保证 全 局 命名 空间 不 被 污染 的 模式 是 ， 把 代码 封装 在 一 个 
匿名 函数 中 并 立即 调用 。 如 此 一 来 ， 该 函数 中 的 所 有 变量 都 是 局 部 的 
(假设 我 们 使 用 了 var 关 键 字 ) ， 并 在 函数 返回 时 被 销 妈 《前提 是 它们 
不 属于 闭 包 ) 。 本 书 第 3 章 : 函数 已 经 详细 讨论 过 该 模式 。 
(function(){ 


/ code goes here... 
}0); 
该 模式 特别 适用 于 某 些 脚本 加 载 时 所 执行 的 一 次 性 初始 化 任务 。 
即时 函数 也 可 用 于 创建 和 返回 对 象 。 如 采 我 们 创建 对 象 的 过 程 很 
复 沫 ， 并 且 需 要 做 一 些 初始 化 工作 ， 那 么 我 们 就 可 以 把 第 一 部 分 相关 
的 初始 化 工作 设置 为 一 个 即时 函数 ， 然 后 通过 它 来 返回 一 个 对 象 一 一 
它 可 以 访问 初始 化 部 分 定义 的 任何 私有 属性 。 
var MYAPP = {}; 
MYAPPdom = (function () { 
// initialization code... 
function _private() { 
//... 
} 
return { 
getStyle: function (el, prop) { 
console.log('getStyle'); 
_private(); 
}, 
setStyle: function (el, prop, value) { 
console.log('setStyle'); 


}0); 


8.1.10 模块 


综合 上 述 几 个 模式 ， 我 们 可 以 获得 一 个 新 的 模式 ， 这 个 模式 通常 
被 称 为 模块 模式 。 在 编程 中 ， 模 块 的 概念 帮助 我 们 管理 代码 厂 段 与 
库 ， 并 且 在 需要 的 时 候 引 入 它们 ， 束 像 玩 拼图 游戏 一 样 。 

扩展 阅读 

JavaScript 暂 时 还 没有 内 建 的 模块 机 制 。 不 过 ， 未 来 可 能 会 通过 
et ee 明 模 块 。 男 外 ， CommonJs 也 有 套 模块 声 
明 规 则 ， 它 通过 require0 函 数 和 exports 对 和 象 来 声明 与 调用 模块 。 具 体 请 
ns commonjs.org ° 

模块 模式 包括 以 下 几 个 部 分 

命名 空间 : 用 于 减少 模块 之 间 的 命名 冲突 。 

即时 函数 : 用 于 提供 私有 作用 域 以 及 初始 化 操作 。 

私有 属性 与 方法 。 

作为 返回 值 的 对 象 : 该 对 象 作 为 模块 提供 公共 API。 例 如 : 


namespace(MYAPP.module.amazing’); 


MYAPP.module.amazing = (function () { 
// short names for dependencies 
var another = MYAPPmodule.another; 
// local/private variables 
var lj; 
// private functions 
function hidden() {} 
// public API 
return { 
hi: function () { 


return "hello"; 


}0); 
使 用 力 式 
MYAPP.module.amazing.hi(); // "hello" 


8.1.11 链 式 调用 


通过 链 式 调用 模式 ， 我 们 可 以 在 单行 代码 中 一 次 性 调用 多 个 方 
法 ， 束 好 像 它们 被 链接 在 了 一 起 。 当 我 们 需要 连续 调用 铬 干 个 彼此 相 
天 的 方法 时 ， 会 融 来 很 大 的 方便 。 实 际 上 ， 我 们 殉 是 通过 前 一 个 方法 
的 结果 〈 即 返回 对 象 ) 来 调用 下 一 个 方法 的 ， 因 此 不 需要 中 间 变 量 。 

通常 情况 下 ， 任 何 一 个 新 建 的 构造 器 都 能 立即 作用 到 某 个 DOM 
元 素 上 去 ， 例 如 在 接 下 来 的 代码 中 ， 我 们 用 构造 锅 新 建 了 一 个 <span> 
元 素 ， 然 后 将 其 添加 到 <body> 元 素 中 : 

var Obj = new MYAPP.dom.Element('span'); 

obj.setText('hello'); 

obj.setStyle('color', 'red'); 


obj.setStyle('font', "Verdana'); 
document.body.appendChild(obj); 
我 们 已 经 知道 ， 构 造 硕 返回 的 是 新 建 对 象 的 this 指 针 。 同 样 的 ， 我 
们 也 可 以 让 setText0 和 setStyle() 方 法 返回 this， 这 样 ， 我 们 残 可 以 直接 
用 这 些 方法 所 返回 的 实例 来 调用 其 他 方法 ， 这 就 是 所 谓 的 链 式 调用 : 
var Obj = new MYAPP.dom.Element('span'); 
obj.setText('hello') 
.SetStyle('color'", 'red') 
.SetStyle(font，Verdana ); 
document.body.appendChild(obj); 


实际 上 ， 我 们 甚至 不 需要 定义 obj 变 量 ， 如 果 在 新 对 象 被 添加 到 
DOM 树 之 后 惑 不 再 需要 访问 它 的 话 。 那 么 我 们 可 以 这 样 写 : 
document.body.appendChild( 
new MYAPP.dom.Element('span') 
.SetText('hello') 


.SetStyle('color', 'red') 


.SetStyle('font', "Verdana') 
); 
此 模式 的 缺点 之 一 是 ， 由 于 所 有 的 调用 都 在 同一 行 ， 一旦 调用 中 
出 错 ， 束 会 为 调试 带 来 一 点 困难 ， 因 为 一 般 报 错 只 会 告诉 我 们 在 第 几 
行 ， 而 我 们 无 法 从 中 得 知 错误 出 现在 链 式 调用 中 的 哪 一 环 。 


8.1.12 JSON 


在 编程 模式 这 一 节 末 尾 ， 我 们 来 简单 介绍 一 下 JSON。 从 技术 上 
说 ，JSON 本 身 不 能 算 编 程 模 式 ， 但 可 以 说 ，JSON 的 使 用 确实 是 一 种 
很 有 用 的 模式 。 

JSON 本 身 实际 上 是 一 种 轻 量 级 的 数据 交换 格式 。 当 使 用 
XMLHttpRequest() 接 收服 务 絮 端的 数据 时 ， 通 常 使 用 的 就 是 JSON 而 不 
是 XML。JSON 是 JavaScript Object Notation 的 缩写 ， 它 除了 使 用 极为 方 
便 之 外 ， 没 有 什么 特别 的 。JSON 格 式 由 对 象 和 数组 标记 的 数据 构成 。 
下 面 是 JSON 字 符 串 的 一 个 例子 ， 来 目 服 务 器 响应 的 XHR 请 求 : 

{ 


‘name': 'Stoyan, 


‘family': 'Stefanov, 
'books': ['OOJS'", 'JSPatterns', JS4PHP'] 
} 


与 其 相对 应 的 XML 应 该 如 下 : 
<?xml version="1.1" encoding="iso-8859-1"?> 
<response> 
<name>Stoyan</name> 
<family>Stefanov</family> 
<books> 
<book>OOJS</pook> 
<book>JSPatterns</book> 
<book>JS4PHP</book> 
</books> 
</response> 
目 完 ， 我 们 可 以 看 到 JSON 是 多 么 轻 量 ， 它 只 用 了 很 少 的 字 市 来 表 
示 数 据 。 但 使 用 JSON 的 最 大 好 处 是 ，JavaScript 可 以 很 容易 地 处 理 
它 。 假 设 我 们 发 送 了 一 个 XHR 请 求 并 得 到 了 一 个 JSON 字 符 串 ， 它 保存 
在 XHR 的 responseText 属 性 中 ， 然 后 ， 我 们 调用 eval() 将 该 字符 捉 转 换 
为 JavaScript 对 和 象 : 


// warning: counter-example 


Var response = eval(( + xhr.responseText + ')'); 

接着 ， 我 们 就 可 以 通过 obj 的 属性 来 访问 这 些 数 据 了 : 

Console log(reponse.name); / "Stoyan" 

Console log (reponse.books[2]); // "JS4PHP" 

由 于 eval0 有 安全 隐患 问题 ， 所 以 最 好 使 用 JSON 对 象 来 处 理 
JSON 数据 (对 于 没有 JSON 对 象 的 老式 浏览 器 ， 可 以 使 用 外 部 库 : 
http://json.org/) ， 这 样 做 也 很 方便 : 

var response = JSON.parse(xhr.responseText); 

正 因为 JSON 简 少 的 特点 ， 它 很 快 成 为 一 种 流行 的 、 与 语言 无 头 
的 数据 交换 格式 。 我 们 可 以 很 容易 地 在 服务 硕 端 使 用 喜欢 的 语言 创建 


JSON 对象， 例如， 可 以 用 PHP 提供 的 json_encode() 方 法 将 PHP 数 组 序 
列 化 为 JSON 字 符 串 ， 再 用 json_decode() 方 法 还 原 PHP 数 组 。 

反 向 将 对 象 转换 为 JSON 字 符 串 ， 采 用 

Stringify() 方 法 : 

var Str = JSON .stringify( { hello:"you" } ):; 


8.2 设计 模子 


在 本 章 第 二 部 分 中 ， 我 们 将 为 您 介绍 如 何 使 用 JavaScript 来 演绎 
《设计 模式 ， 可 复 用 面向 对 象 软件 的 基础 》 一 书 中 介绍 的 部 分 设计 模 

式 。 该 书 很 有 影响 力 ， 通 常 也 被 称 为 Book of Four， 或 者 Gang of Four 
或 GoF (代表 该 书 的 四 位 作者 ) 。 这 本 书 中 所 涉及 的 模式 大 致 上 可 以 
分 为 3 组 。 

创建 型 模式 : 涉及 对 象 的 创建 与 初始 化 。 

结构 型 模式 : 描述 了 如 何 组 合 对 象 以 提供 新 的 功能 。 

行为 型 模式 : 描述 了 对 象 之 间 如 何 通信 。 

GoF 一 共 介 绍 了 23 个 模式 ， 目 此 书 发 行 以 来 ， 人 们 又 发 现 了 更 多 
的 模式 。 在 这 本 书 中 ， 我 们 只 介绍 其 中 的 四 个 ， 并 通过 一 些 具 体 
JavaScript 的 实例 加 以 说 明 。 请 记 住 ， 提 到 模式 ， 我 们 更 关注 的 是 它们 
接口 及 关系 ， 而 不 是 内 部 的 实现 细 方 。 一 旦 您 掌握 了 一 种 设计 模式 ， 
实现 起 来 很 容易 ， 尤 其 对 于 JavaScript 这 样 的 动态 语言 来 说 。 

下 面 是 我 们 将 要 介绍 的 模式 : 

单 件 模式 ; 

工厂 模式 ; 

瘘 饰 絮 模式 ; 

观察 者 模式 。 


8.2.1 式 1 


单 件 是 一 个 创建 型 的 设计 模式 ， 它 主要 考虑 的 是 创建 对 象 的 方 
式 。 当 我 们 需要 创建 一 种 类 型 或 一 个 类 的 唯一 对 象 时 ， 就 可 以 使 用 该 
模式 。 在 一 般 的 语言 中 ， 这 意味 着 这 一 个 类 只 能 被 创建 一 个 实例 对 
象 ， 如 果 之 后 再 尝试 创建 该 对 象 的 话 ， 代 码 束 只 会 返回 原来 的 实例 。 

但 由 于 JavaScript 本 身 没有 类 的 概念 ， 所 以 单 件 成 为 了 默认 行为 ， 
也 是 最 目 然 的 模式 。 每 个 对 象 都 是 一 个 单 件 。 

JavaScript 中 最 基本 的 单 件 模式 实现 是 使 用 对 象 文 本 标识 法 : 

var single = {}; 


很 简单 ， 不 是 吗 ? 


8.2.2 单 件 模式 2 


但 当 我 们 想 用 类 似 于 类 的 语法 来 实现 单 件 模 式 时 ， 事 情 束 会 变 得 
更 有 趣 一 些 。 例 如 ,假设 我 们 有 一 个 叫做 Logger0 的 构造 右 ， 而 我 们 
想 这 人 么 使 用 它 : 


var my_log = new Logger(); 


my_log.log('some event'); 

// ... 1000 lines of code later in a different scope... 

var other_log = new Logger(); 

other_log.log('some new event'); 

console.log(other_log === my_log); // true 

这 段 代码 所 要 表达 的 意思 是 ， 尽 管 这 里 多 次 使 用 了 new， 但 实际 
上 所 创建 的 对 象 实例 却 始终 只 有 一 个 ， 后 续 的 构造 句 调 用 过 程 中 所 返 
回 的 始终 是 同一 个 对 象 。 这 是 怎么 做 到 的 呢 ? 

8.2.2.1 全 局 变量 


解决 方案 之 一 是 用 全 局 变量 来 保存 这 个 唯一 的 实例 。 在 这 种 情况 
下 ， 我 们 的 构造 锅 看 起 来 像 这 样 : 
function Logger() { 


global_log = this; 
} 
return global_ log; 
} 
使 用 这 个 构造 右 将 达到 预期 的 结果 : 
var a = new Logger(); 
var b = new Logger(); 
console.log(a === b); // true 
但 这 样 做 的 缺陷 也 正 是 使 用 了 全 局 变量 ， 它 在 任何 时 候 都 有 可 能 
个 覆盖 控 ， 从 而 导致 实例 丢失 。 反 之 亦 然 ， 全 局 变量 也 随时 有 可 能 禾 
盖 挥 别 的 对 象 。 
8.2.2.2 构造 右 属 性 
正如 我 们 所 知道 的 ， 辑 数 也 是 一 种 对 象 ， 本 号 也 有 属性 。 因 此 ， 
我 们 也 可 以 将 这 个 唯一 实例 设置 为 构造 絮 本 和 喘 的 属性 。 
function Logger() { 


if (ILogger.single_instance) { 
Logger.single_instance = this; 
} 
return Logger.single_instance; 
} 
在 这 种 情况 下 ， 当 我 们 调用 var a = new Logger0 语 句 时 ，a 就 会 指 
回 一 个 新 建 的 Loggersingle_instance 属性 。 接 下 来 如 果 我 们 再 调用 var b 


= new Logger() 语 句 ， 得 到 的 b 将 会 指 癌 同一 个 Logger.single_instance 
属性 。 这 正 是 我 们 想 要 的 结果 。 

上 述 方法 很 显然 解决 了 全 局 变量 所 市 来 的 问题 ， 因 为 没有 全 局 变 
量 被 创建 。 它 的 唯一 缺陷 是 Logger 构 造 器 的 属性 是 公有 的 ， 因 此 它 随 
上 时 有 可 能 会 被 覆盖 ， 如 此 一 来 ， 这 个 唯一 实例 可 能 会 被 丢失 或 被 修 
改 。 上 述 方法 很 显然 解决 了 全 局 命名 空间 所 带 来 的 问题 ， 因 为 我 们 没 
有 创建 全 局 变量 。 它 唯一 的 缺陷 是 Logger 构 造 器 的 属性 是 公开 可 见 
的 ， 因 此 随时 有 被 覆盖 的 可 能 ， 如 此 一 来 ， 这 个 单 实例 残 有 可 能 会 被 
丢失 或 被 修改 。 当 然 ， 我 们 也 只 能 为 之 后 那些 搬 起 石头 打 目 己 的 脚 的 
程序 员 保护 到 这 一 步 了 。 蛙 竞 ， 如 果 有 人 可 以 对 该 单 实例 属性 动手 
脚 ， 也 就 一 样 可 以 对 Logger 的 构造 器 动手 脚 。 

8.2.2.3 使 用 私有 属性 

上 述 问 题 鸭 解决 方案 是 使 用 私有 属性 。 我 们 已 经 知道 如 何 使 用 闭 
包 来 保护 一 个 变量 ， 作 为 一 个 练习 ， 请 用 此 方法 实现 单 件 模 式 。 


8.2.3 工厂 模式 


工厂 模式 也 属于 来 创建 对 象 的 创建 型 模式 。 当 我 们 有 多 个 相似 的 
对 象 而 又 不 知道 应 该 允 使 用 哪 种 时 ， 残 可 以 考虑 使 用 工厂 模式 。 在 该 
模式 下 ， 代 码 将 会 根据 具体 的 输入 或 其 他 既定 规则 ， 目 行 决定 创建 哪 
种 类 型 的 对 象 。 

下 面 ， 假 设 我 们 有 三 个 不 同 的 构造 冲 ， 它 们 所 实现 的 功能 是 相似 
的 。 它 们 所 创建 的 对 象 都 将 接受 一 个 URL 类 型 的 参数 ， 但 处 理 细 市 稍 
有 不 同 。 例 如 ， 它 们 分 别 创建 的 是 一 个 文本 DOM 廊 上 态 、 一 个 链接 以 及 
一 小 图 像 * 

var MYAPP = {}:; 

MYAPP.dom = {}: 


MYAPP.dom.Text = function (url) { 
this.url = url; 
this.insert = function (where) { 
var txt = document.createTextNode(this.url); 
where.appendChild(txt); 
此 
上 
MYAPP.dom.Link = function (url) { 
this.ur] = url; 
this.insert = function (where) { 
var link = document.createElement('a'); 
link.href = this.url; 
link.appendChild(document.createTextNode(this.url)); 
where.appendChild(link); 
}; 
}; 
MYAPP.dom.Image = function (url) { 
this.url = url; 
this.insert = function (where) { 
var im = document.createEjement(Cimg ); 
im.src = this.url; 
where.appendChild(im); 
上 
}; 
使 用 三 个 构造 如 的 方法 都 一 样 : 设置 url 属 性 并 调用 insert() 方 法 。 
var Url = 'http:/www.phpied.com/images/covers/00]js.jpg'; 


var 0 = new MYAPP.dom.Image(url); 


o.insert(document.body); 

var 0 = new MYAPP.dom.TIext(ur]); 

o.insert(document.body); 

var 0 = new MYAPP.dom.Link(url); 

o.insert(document.body); 

但 我 们 预先 并 不 知道 应 该 创建 哪 一 种 对 象 ， 例 如 ， 程 序 需要 根据 
用 户 所 按 的 按钮 来 决定 对 象 的 创建 。 假 设 type 中 包含 了 被 创建 对 象 的 
类 型 ， 我 们 可 以 用 if 或 者 switch 语 句 写 出 如 下 代码 : 


Var 0， 


if (type === 'Image') { 
0 = new MYAPP.dom.Imagel(); 
} 
if (type === 'Link') { 
o = new MYAPP.dom.Link(); 
} 
if (type === "Text') { 
o = new MYAPP.dom.Text(url); 
} 
oO.UT = 'http://... 
0.insert(); 
这 上段 代 码 可 以 工作 ， 但 如 果 构 造 右 很 多 ， 代 码 束 会 很 长 ， 难 以 维 
护 。 尤 其 当 我 们 是 在 写 一 个 库 或 框架 时 ， 束 有 可 能 根本 不 知道 构造 右 
函 数 的 名 字 。 这 时 候 ， 就 应 该 考虑 将 这 种 动态 创建 对 象 的 操作 委托 给 
一 个 工厂 函数 。 
下 面 ， 让 我 们 来 给 MYAPPdom 工 具 添加 一 个 工厂 方法 : 
MYAPP.dom.factory = function(type, url) { 
return new MYAPP.doml[typel(ur}); 


然后 我 们 瓯 可 以 把 上 面 的 三 个 这 盏 换 掉 了 : 

var image = MYAPPdom.factory("Image", url); 

image.insert(document.body); 

在 这 个 例子 中 ，factory0) 方 法 是 很 简单 的 ， 但 在 实际 使 用 中 ， 我 们 
可 能 需要 对 该 函数 的 type 参数 值 进行 相关 的 验证 〈 例 如， 检查 
MYAPP.dom[type] 是 否 存 在 ) ， 并 且 对 所 有 的 对 象 做 一 些 相 同 的 设置 
工作 〈 例 如 ， 设 置 所 有 构造 器 共用 的 URL) 


8.2.4 装饰 器 模式 


装饰 大 模 式 是 一 种 结构 型 模式 ， 它 与 对 象 的 创建 无 大， 主要 考虑 
的 是 如 何 拓展 对 象 的 功能 。 也 束 是 说 ， 除 了 使 用 线性 式 ( 父 一 子 一 
孙 ) 继承 方式 之 外 ， 我 们 也 可 以 为 一 个 基础 对 象 创建 大 干 个 疙 饰 对 和 象 
以 拓展 其 功能 。 然 后 ， 由 我 们 的 程序 目 行 选择 不 同 的 狐 饰 侨 ， 并 按 不 
同 的 顺序 使 用 它们 。 在 不 同 的 程序 中 我 们 可 能 会 面临 不 同 的 需求 ， 并 
从 同样 的 小 饰 器 集合 中 选择 不 同 的 子 集 。 在 下 面 的 代码 中 ， 我 们 为 您 
演示 了 洲 饰 右 模 式 的 一 种 使 用 方法 : 


Var obj = { 


doSomething: function () { 
console.log('sure, asap'); 
} 
//... 
obj = obj.getDecorator('decol ); 
obj = obj.getDecorator('deco13'); 
obj = obj.getDecorator('deco5 ); 


obj.doSomething(); 

这 个 例子 的 开头 使 用 了 一 个 拥有 doSomething0) 方 法 的 简单 对 象 ， 
接着 ， 我 们 通过 名 字 来 选择 不 同 的 朔 饰 左 。 这 里 的 每 一 个 装饰 硕 都 有 
一 个 doSomething(0) 方 法 一 一 它 会 先 调用 前 一 个 装饰 硕 的 doSomething() 
方法 ， 然 后 再 执行 目 己 的 特有 代码 。 每 次 添加 一 个 装饰 絮 时 ， 我 们 都 
会 履 访 基础 obj。 最 后 ， 选 择 完 所 有 装饰 右 后 ， 调 用 doSomething() 方 
法 ， 它 即 会 顺序 调用 每 个 装饰 颖 的 doSomething0 方 法 。 下 面 ， 我 们 再 
来 看 一 个 具体 的 实例 。 

装饰 一 棵 圣诞 树 

下 面 来 看 一 个 效 饰 颖 模式 的 实例 装饰 一 棵 圣诞 树 。 首 移 我 们 来 
实现 decorate() 方 法 。 

var tree = {}:; 

tree.decorate = function() { 

alert(Make sure the tree won\'t fal] ); 

上 
接着 ， 再 定义 getDecorator() 方 法 ， 该 方法 用 于 添加 额外 的 闭 ? 
筑 。 闭 饰 硕 被 实现 为 构造 硕 函 数 ， 都 继承 目 tree 对 象 。 

tree.getDecorator = function(deco){ 

tree[ deco].prototype = this; 
return new tree[deco |]; 

起 
下 面 来 创建 第 一 个 装饰 器 RedBalls0， 我 们 将 它 设 为 tree 的 一 个 属 
性 (以 保持 全 局 命名 空间 的 纯净 ) 。RedBall 对 象 也 提供 了 decorate() 方 
法 ， 注 意 它 先 调 用 了 父 类 的 decorate(0) 方 法 。 

tree.RedBalls = function() { 

this.decorate = function() { 


this.RedBalls.prototype.decorate(); 


alert(Put on some red balls’); 
}; 
}; 
然后 ， 我 们 用 同样 的 方法 来 分 别 添加 BlueBals0 和 Angel0 装 饰 


tree.BlueBalls = function() { 
this.decorate = function() { 
this.BlueBalls.prototype.decorate(); 
alert(Add blue balls'"); 
}; 
上 
tree.Angel = function() { 
this.decorate = function() { 
this.Angel.prototype.decorate(); 
alert(An angel on the top); 


忆 

再 把 所 有 的 效 饰 帮 都 添加 到 基础 对 象 中 : 
tree = tree.getDecorator('BlueBalls'); 

tree = tree.getDecorator( Angel'); 

tree = tree.getDecorator(RedBalls'); 

最 后 ， 运 行 decorate() 方 法 : 
tree.decorate(); 

最 终 ， 当 我 们 执行 decorate() 方 法 时 ， 将 依次 得 到 如 下 警告 信 
Make sure the tree won't fall 

Add blue balls 

An angel on the top 


Add some red balls 
由 此 可 见 ， 我 们 可 以 创建 很 多 装饰 器 ， 然 后 按照 需求 选择 和 组 合 
它们 。 


8.2.5 观察 者 模式 


观察 者 模式 (有 了 时 也 称 为 发 布 -订阅 模式 ) 是 一 种 行为 型 模式 ， 主 
要 用 于 处 理 不 同 对 象 之 间 的 交互 通信 问题 。 观 察 者 模式 中 通 癌 会 包含 
两 类 对 象 。 

一 个 或 多 个 发 布 者 对 象 : 当 有 重要 的 事情 发 生 时 ， 会 通知 订阅 
者 o 

一 个 或 多 个 订阅 者 对 象 : 它们 追随 一 个 或 多 个 发 布 者 ， 监 听 它 们 
的 通知 ， 并 作出 相应 的 反应 。 

对 观察 者 模式 你 可 能 很 熟悉 。 看 上 去 ， 观 察 者 模式 似乎 与 前 一 草 
中 所 讨论 浏览 絮 事 件 很 相似 。 确 实 如 此 ， 浏 贤 器 事件 正 是 该 模式 的 一 
个 典型 应 用 。 浏 览 器 是 发 布 者 ， 当 一 个 事件 〈《 如 onclick) 发 生 时 ， 它 
会 发 出 通知 。 事 件 订 阅 者 会 监听 这 类 事件 ， 并 在 事件 发 生 时 被 通知 。 
浏览 器 〈 发 布 者 ) 为 每 个 订阅 者 发 送 一 个 事件 对 象 ， 但 在 我 们 自己 的 
实现 中 ， 大 可 不 必 使 用 事件 对 象 ， 反 之 ， 可 以 使 用 任何 合适 的 数据 类 
型 o 

通常 来 说 ， 观 察 者 模式 可 分 为 两 类 : 推送 和 拉动 。 推 送 模式 中 是 
由 发 布 者 负责 将 消息 通知 给 各 个 订阅 者 。 而 拉动 模式 则 要 求 订阅 者 主 
动 跟 踩 发布 者 的 状态 变化 。 

下 面 ， 我 们 来 看 一 个 推送 模式 的 实例 。 我 们 把 与 观察 者 相关 的 代 
码 放 到 一 个 单独 的 对 象 中 ， 然 后 以 该 对 和 象 为 一 个 混合 类 ， 将 它 的 功能 
加 到 发 布 者 对 象 中 。 如 此 一 来 ， 任 何 一 个 对 象 都 可 以 成 为 发 布 者 ， 而 


任何 一 个 功能 型 对 象 都 可 以 成 为 订阅 者 。 观 察 者 对 象 中 应 该 有 如 下 属 
性 和 方法 。 

由 回调 函数 构成 的 订阅 者 数组 。 

用 于 添加 和 删除 订阅 者 的 addSubscriber() 和 removeSubscriber() 方 
法 。 

publish0) 方 法 ， 授 受 并 传递 数据 给 订阅 者 。 

make() 方 法 ， 将 任意 对 象 转变 为 一 个 发 布 者 并 为 其 添加 上 述 方 
I 


以 下 是 一 个 观察 者 对 象 的 实现 代码 ， 其 中 包含 了 订阅 相关 的 方 
法 ， 并 可 以 将 任意 对 象 转变 为 发 布 者 。 
Var observer = { 
addSubscriber: function (callback) { 
if (typeof callback === "function") { 
this.subscribers[this.subscribers.length| = callback; 
| 
上 
removeSubscriber: function (callback) { 
for (var i = 0; i < this.subscribers.length; i++) { 
if (this.subscribers[i] === callback) { 


delete this.subscribers[il: 


} 
克 
publish: function (what) { 
for (vari = 0; i < this.subscribers.length; i++) { 
让 (typeof this.subscribers[i] === 'function') { 


this.subscribers[il(what); 


} 
}, 
make: function (0) { // turns an object into a publisher 
for (var i in this) { 
让 (this.hasOwnProperty(i)) { 
ol[i] = this[ij; 


o.subscribers = []; 


} 
ls 
接 下 来 ， 我 们 来 创建 一 些 订 阅 者 。 订 阅 者 可 以 是 任意 对 象 ， 它 们 
的 唯一 职责 是 在 某 些 重要 事件 发 生 时 调用 publish0 方 法 。 下 面 是 一 个 
blogger 对 象 ， 每 当 新 博客 准备 好 时 ， 就 会 调用 publish() 方 法 。 
var blogger = { 


writeBlogPost: function() { 
Var content = "Today is ' + new Date(); 
this.publish(content); 
} 
} 
男 有 一 个 la_times 对 象 ， 每 当 新 一 期 的 报刊 出 来 时 ， 束 会 调用 
publish() 方 法 。 
var la times= { 
newlssue: function() { 
var paper = "Martians have landed on Earth!'; 


this.publish(paper); 


下 
它们 都 很 容易 转变 为 发 布 者 : 


observer.make(blogger); 


observer.makel(la_times); 
与 此 同时 ， 谁 备 两 个 简单 对 象 jack 和 j 详 1; 
var jack = { 
read: function(what) { 
console.log("Ijust read that " + what) 
} 
上 
var jill = { 
gossip: function(what) { 
console.log("You didnt hear it from me, but " + what) 
} 
所 
他 们 可 以 订阅 blogger 对 象 ， 只 需要 提供 事件 发 生 时 的 回调 函数 。 
blogger.addSubscriber(jack.read); 


blogger.addSubscriber(jill.gossip); 

当 blogger 写 了 新 的 博客 时 会 发 生 什 么 事 呢 ? 结 采 就 是 jack 和 说 ] 会 
收 到 通知 : 

> blogger.writeBlogPost(); 

I just read that Today is Fri Jan 04 2013 19:02:12 GMT-0800 (PST) 

You didn't hear it from me, but Today is Fri Jan 04 2013 19:02:12 
GMT-0800 (PST) 

任何 时 候 j 这 都 可 以 取消 订阅 。 于 是 当 博 主 写 了 另 一 篇 博客 时 ， 训 
就 不 会 再 收 到 通知 消息 。 


> bloggerremoveSubscriber( 记 .gossip ); 


> blogger.writeBlogPost(); 
I just read that Today is Fri Jan 04 2013 19:03:29 GMT-0800 (PST) 


地 也 可 以 订阅 LATimes， 因 为 一 个 订阅 者 可 以 对 应 多 个 发 布 者 。 

> la_times.addSsubscriber(j 记 .gossip ); 

如 此 ， 当 LA Times 发 行 新 的 期 刊 后 ， 记 就 会 收 到 通知 并 执行 
jl.gossip() 方 法 。 

> la_times.newlssue(); 

You didn't hear it from me, but Martians have landed on Earth! 


8.3 小 结 


在 本 章 中 ， 我 们 学 习 了 一 些 JavaScript 语言 中 通用 的 编程 模式 ， 
了 解 了 如 何 使 程序 简洁 、 干 净 ， 运 行 得 更 快 ， 以 便 能 更 好 地 与 其 他 程 
序 或 库 工作 。 然 后 我 们 讨论 了 如 何 实现 Book of Four 一 书 中 介绍 的 部 

分 设计 模式 。 这 些 内 容 充 分 证 明了 ，JavaScript 作为 一 门 功 能 全 面 的 语 
日 ， 可 以 很 容易 地 实现 这 文 些 经 典 模式 。 设 计 模 式 是 一 个 很 大 的 主题 ， 
读者 可 以 通过 JSPatterns.com 网 站 与 本 书 著者 进一步 讨论 JavaScript 中 的 


Object-Oriented Software) 是 软件 工程 领域 有 关 软 件 设计 的 一 本 书 是 出 有 总结 了 大 
风 软 件 设 计 问 题 的 标准 解决 方案 ， 称 为 软件 设计 模式 。 该 书 为 : El chan 


Helm, Ralph Johnson，John Vlissides， 后 以 “四 人 帮 ” (Gang of Four，GoF, 


附录 A 保留 字 


在 这 篇 附录 中 ， 我 们 列 出 了 ECMAScript 5 (ES5) 所 定义 的 两 个 
保留 字 列 表 。 第 一 个 是 当前 所 用 的 保留 字 列 表 ， 第 二 个 则 是 为 将 来 预 
备 的 保留 字 列 表 。 

另外 ， 这 里 也 收录 了 ES3 中 出 现 过 、 但 今后 不 再 是 保留 字 的 单词 
列表 。 

你 留 字 无 法 被 用 作 变 量 名 : 

var break = 1; // syntax error 


如 有 果 我 们 需要 在 对 象 属性 中 使 用 这 些 词 ， 就 必须 将 其 用 引号 括 起 


var 0 = {break: 1}; /OK inmany browsers, error in IE 
Var 0 = {"break": 1}; // Always OK 
alert(o.break); // error in 下 
alert(o["break"]); // OK 

现役 保留 字 

这 里 列 出 了 ES5 中 的 现役 保留 字 : 
break 

case 

catch 

continue 

debugger 

default 


delete 

do 

else 

finally 

for 

function 

if 

in 

instanceof 

new 

return 

switch 

this 

throw 

try 

typeof 

Var 

void 

while 

with 

预备 你 留 字 

这 里 列 出 了 JavaScript 当 前 并 没有 使 用 ， 而 是 为 后 续 版 本 所 准备 的 
剑 狠 字 忆 

class 

const 

enum 


export 


extends 
implements 
import 
interface 

let 

package 
private 
protected 
public 

static 

super 

yield 
废除 的 保留 字 
这 里 列 出 了 在 ES5 中 已 被 废除 的 保留 字 


最 好 还 是 不 要 使 用 它们 作为 变量 名 。 


abstract 
boolean 
byte 
char 
double 
final 
float 
goto 

int 

long 
native 


short 


。 但 考虑 到 老式 浏 


中 太 号 已 


项 有 ， 


Synchronized 
throws 
transient 


volatile 


附录 B 和 内 建 函 数 


在 这 篇 附 孙 中 ， 我 们 列 出 了 在 第 3 章 函 数 中 所 讨论 过 的 所 有 内 建 画 
数 〈 即 全 局 对 象 的 方法 列表 ， 如 表 B-1 所 示 ) 。 


parseInt() 


parseFloat () 


表 B-1 
相关 说 明 
该 函数 有 两 个 参数 : 一 个 输入 对 象 及 一 个 进 制 基数 radix。 它 主要 用 
于 将 输入 转换 成 整数 值 并 返回 ， 如 果 转 换 失 败 就 返回 NaN。 另 外 ， 
函数 会 忽略 输入 中 所 包含 的 指数 信息 。radix 的 默认 值 为 10( 即 十 进 
制 ), 但 由 于 忽略 该 参数 可 能 会 导致 一 些 不 可 预测 的 结果 (例如 当 您 
输入 08 这 样 的 数值 时 )， 所 以 最 好 还 是 始终 明确 指定 它 的 值 


> PatrseInt('10e+37) 7 
10 


> parseInt('FF'); 
NaN 


> parseLlnt(' EF!, JT0) 


255 
该 函数 会 试图 将 其 接受 的 参数 转换 成 浮 点 数值 并 返回 。 它 可 以 处 理 
输入 中 的 指数 信息 

> parseFloat ('l10e+3'); 

10000 


> Parserloat ("123 -456test 1) 5 
123.456 


函数 名 


IsNaN () 


isFinite() 


encodeURIComponent () 


相关 说 明 
该 函数 名 是 “Is Not a Number” 的 缩写 ， 它 主要 用 于 判断 其 参数 是 


先 尝试 将 输入 值 转换 成 数字 
> isNaN (NaN); 
true 


> isNaN(123); 
false 


> isNaN(parseInt ('FF')); 
true 


> isNaN(parseInt ('FF', 16)); 
false 


在 该 函数 中 ， 如 果 我 们 的 输入 是 一 个 数字 (或 者 可 以 转换 为 数字 )， 
但 又 不 属于 Infinity 或 -Infinity, 就 返回 true, 否则 就 返回 
false 


> isFinite(le+1000);，; 
false 


3 LaFINite (=Infinity); 
false 


> LsPLnlte (L223 

true 
该 函数 会 将 输入 转换 为 符合 URL 编码 的 字符 串 ， 关 于 这 种 URL 编 
码 的 详细 信息 ， 读 者 可 以 参考 Wikipedia 中 的 相关 文章 : 
http://en.wikipedia.org/wiki/Url encode 

> encodeURIComponent 

('http://phpied.com/'); 
"http%3A%S2F%2Fphpied.com%$2F" 


> encodeURIComponent 
('some script?key=v@lue'); 
"some%20script%3Fkey%3Dv%40lue" 


函数 名 


decodeURIComponent () 


相关 说 明 


该 函数 主要 用 于 解码 其 所 接受 的 URL 编码 字符 串 
> decodeURIComponent ('%20%40%20°');，; 
my @ TT 


encodeURI () 


decodeURI () 


eval () 


该 函数 主要 用 于 将 输入 转换 为 URL 编码 ， 但 它 始 终 假定 其 所 接受 
的 是 一 个 完整 的 URL， 因 此 它 所 编码 的 部 分 不 包括 目标 URL 的 协 
议 ( 例 如 http://) 和 域名 (例如 www .phpied.com) 


> encodeURI('http://phpied.com/'); 
http://phpied.com/ 


> encodeURI('some script?key=v@lue'); 
"some%20script?key=v@lue" 


该 函数 主要 用 于 执行 encodeURI () 的 反 操 作 


> decodeURI ("some®%20script?key=v@lue"),; 
"some script?key=v@lue" 


该 函数 会 执行 其 接收 到 的 JavaScript 代码 串 ， 并 返回 代码 串 中 最 后 
一 个 表达 式 的 执行 结果 
可 能 的 话 ， 请 尽量 避免 使 用 该 函数 

> earl FF 2°)$ 

3 


> eval('parseInt ("123")'"'); 
123 


> eval('new Array(1,2,3)'); 
[1, 2, 3] 


> val ("wew DArray (ly 23)F 4. F Zr) 
3 


在 这 篇 附录 中 ， 我 们 列 出 了 ECMAScript 标 准 中 所 描述 的 所 有 内 建 


构造 画 数 ， 以 及 用 这 些 构造 函数 所 创建 对 象 的 方法 与 属性 。ES5 独 有 的 
API 会 被 单独 罗列 。 


型 ， 


Object 

ObjectO 是 用 于 创建 Object 对 象 的 构造 器 ， 例 如 ; 

> var 0 = new Object(); 

当然 ， 我 们 也 可 以 使 用 对 象 标 识 法 来 实现 同样 的 效果 : 

> var 0 = {};// recommended 

该 构造 器 可 以 接受 任何 类 型 的 参数 ， 并 且 它 会 目 动 识别 参数 的 类 
并 选择 更 合适 的 构造 吉 来 完成 相关 操作 。 例 如 ， 如 宁 我 们 传递 给 


new Object() 构 造 絮 的 是 一 个 字符 串 ， 那 么 就 相当 于 调用 new String() 
构造 器 。 尺 管 这 种 做 法 不 值得 推荐 ( 比 起 让 程序 去 猜 ， 明 确 地 声明 会 
更 好 ) ， 但 仍然 是 可 用 的 。 


> var 0 = new Object(Csomething '); 
> 0.constructor; 

function String(){[native code]} 

> var 0 = new Object(123); 

> 0.COnstructor; 


function Number(){[native code]} 


语言 中 其 他 所 有 的 对 象 ， 无 论 是 内 建 的 还 是 目 定 义 的 ， 都 继承 于 


Object ( 见 表 C-1、 表 C-2) 。 因 此 几乎 所 有 的 类 型 都 可 以 调用 Object 的 
方法 与 属性 。 


Object 构 造 器 的 成 员 
表 C-1 


属性 /方法 相关 说 明 

该 属性 是 所 有 对 象 的 原型 〈 包 括 Object 对 象 本 身 )， 语 言 中 的 其 他 
对 象 正 是 通过 在 该 属性 上 添加 东西 来 实现 它们 之 间 的 继承 关系 的 。 
所 以 请 小 心 使 用 


> = ing (' '); 
bt rbotse var S new String('noodles') 
> Object.prototype.custom = 1; 


1 


> SE CUStCONM: 


1 
Object.prototype 的 成 员 
表 C-2 
属性 /方法 相关 说 明 
该 属性 指向 用 来 构造 该 对 象 的 构造 器 ， 在 这 里 为 object () 
> Object .prototype. constructor === Object; 
true 
eonmstruetor 
> Var oO = new Object (); 
> o.constructor === Object; 
true 
该 方法 返回 的 是 一 个 用 于 描述 目标 对 象 的 字符 串 。 特 别 地 ， 当 目 
标 是 一 个 Number 对 象 时 ， 我 们 还 可 以 传递 一 个 用 于 进 制 数 的 
参数 radix， 该 参数 的 默认 值 为 10 
toSstring (radix) » "Var & EF: BESops ly 


» intoOSteEing(}!} 
"[object Object]" 


> var n = new Number (255); 


属性 /方法 


toLocaleString () 


ValueoOf () 


相关 说 明 


> NtoString () 7 
"255" 


> .toString (16); 
有 人 人 


该 方法 的 作用 与 toString() 基 本 相同 , 只 不 过 它 会 做 一 些 本 地 
化 处 理 。 该 方法 会 根据 当前 对 象 的 不 同 而 被 重 写 ， 例 如 
Date()，Number()，Array()， 它 们 的 值 都 会 以 本 地 化 的 形式 
输出 。 当 然 ， 对 于 包括 Object(O 在 内 的 其 他 大 多 数 对 象 来 说 ， 
该 方法 与 toString() 是 基本 相同 的 。 
在 浏览 器 环境 下 ， 我 们 还 可 以 通过 BOM 对 象 Navigator 的 
language 属性 (在 IE 中 则 是 userLanguage) 来 了 解 当前 所 使 
用 的 语言 : 

> navigator.1language.; 

"en-US" 
该 方法 返回 的 是 用 基本 数据 类 型 所 表示 的 this 值 ， 如 果 它 
可 以 使 用 基本 数据 类 型 表示 的 话 , 例 如 Number 对 象 返回 的 
是 它 的 基本 数值 ， 而 Date 对 象 返回 的 是 一 个 时 间 戳 
(timestamp )。 如 果 无 法 用 基本 数据 类 型 表示 ， 该 方法 会 返回 
this 本 身 


> var o = {}; 
> typeof 0.Valueoft () ， 
"object" 


> o.valueOf () === oO; 


true 


> Var n = new Number (101);，; 
> typeof n.valueoOf (); 
"number" 


> n.valueOof () === n; 
false 


属性 /方法 相关 说 明 
> var d = new Date() 
> typeof Q.valueof () ， 


Valueof () n 


> d.valueOf () ， 
1357840170137 


该 方法 仅 在 目标 属性 为 对 象 自身 属性 时 返回 true， 而 当 该 属性 
是 从 原型 链 中 继承 而 来 或 根本 就 不 存在 时 返回 false 
> Var OO = {prop: 1}; 


> o.hasOwnProperty('prop'); 


hasOwnProperty (prop) a 


> o.hasOwnProperty('toString'); 
false 


> o.hasOwnProperty('fromString'); 
false 


如 果 目 标 对 象 是 当前 对 象 的 原型 ， 该 方法 就 会 返回 true， 而 且 ， 
当前 对 象 所 在 原型 链 上 的 所 有 对 象 都 能 通过 该 测试 ， 并 不 局 限于 
它 的 直系 关系 


> Var s = new String(''); 

> Object.prototype.isPrototypeOf (s) ; 
isPrototypeOf (obj) true 
> String.prototype.isPrototypeOf (s); 
true 


> Array.prototype.isPrototypeOf (s); 


false 
如 果 目 标 属性 能 在 for-in 循环 中 被 显示 出 来 ,该 方法 就 返回 true 
> 
> a.propertyIsEnumerable('length'); 
propertyIsEnumerable (prop) false 


> a.propertyIsEnumerable (0); 
true 


在 ECMAScript 5 中 附加 的 Object 属 性 


在 ECMAScript 3 中 ， 除 了 一 些 内 置 属性 (例如 ，Math.PI) ， 对 象 
所 有 的 属性 在 任何 时 候 都 可 以 被 修改 、 插 入 、 删 除 。 在 ES5 中 ， 我 们 
可 以 设置 属性 是 否 可 以 被 改变 或 是 删除 一 一 在 这 之 前 ， 它 是 内 置 属性 
的 特权 。ES5 引 入 了 属性 描述 符 的 概念 ， 我 们 可 以 通过 它 对 所 定义 的 属 
性 有 更 大 的 控制 权 。 

我 们 可 以 把 属性 描述 符 想象 成 一 个 对 象 ， 我 们 用 该 对 象 来 描述 某 
个 属性 所 具有 的 各 种 特征 。 描 述 这 些 特征 所 使 用 的 语法 与 一 般 的 对 象 
标识 法 无 异 ， 所 以 属性 描述 符 也 会 有 自己 的 属性 与 方法 。 在 这 里 ， 为 
了 避免 发 义 ， 我 们 将 属性 描述 符 的 属性 称 为 特性 (attributes) 。 这 些 特 
性 包括 : 


value 


当 试图 获取 属性 时 所 返回 的 值 。 
该 属性 是 否 可 写 。 
该 属性 在 for-in 循环 中 是 否 会 被 枚 举 。 

configurable 该 属性 是 否 可 删除 。 

set( 一 一 该 属性 的 更 新 操作 所 调用 的 函数 。 

get( 一 一 获取 属性 值 时 所 调用 的 函数 。 

另外 ， 数 据 描述 符 (其 中 属性 为 : enumerable ，configurable ， 
value ， writable ) 与 存 取 描述 符 (其 中 属性 为 : enumerable ， 
configurable，set()，get()) 之 间 是 有 互 斥 关系 的 。 在 定义 了 set0 和 get0) 
之 后 ， 摘 述 符 会 认为 存 取 损 作 已 被 定义 过 了 ， 其 后 再 定义 value 和 
writable 会 引起 错误 。 

以 下 是 ES3 风 格 的 属性 定义 方式 : 


Var persion = {}; 


writable 


enumerable 


person.legs = 2; 
以 下 是 等 价 的 ES5 通 过 数据 描述 符 定 义 属 性 的 方式 : 


Var persion = {}; 


Object.defineProperty(person, "legs",{ 


value: 2， 

writable: true, 
configurable: true, 
enumerable: true 

月; 

其 中 ， 除 了 value 的 默认 值 为 ndefined 以 外 ， 其 他 的 默认 值 都 为 
false。 这 也 就 意味 着 ， 如 采 我 们 想 要 通过 这 一 方式 定义 一 个 可 写 的 属 
性 ， 必 须 显 式 将 它们 设 为 tue 。 

或 者 ， 我 们 也 可 以 通过 ES5 的 存 取 描 述 符 来 定义 : 


Var person = {}; 


Object.defineProperty(person, "legs", { 
set: function (v) {this.value = v;}, 
get: function(v) {return this.value;)}, 
configurable: true, 
enumerable: true 
月; 
person.legs = 2; 
如 您 所 见 ， 现 在 我 们 手 里 多 了 许多 可 用 于 描述 属性 的 代码 ， 如 林 
想 要 防止 别人 筑 改 我 们 的 属性 ， 就 必须 要 用 到 它们 。 此 外 ， 也 不 要 起 
了 浏览 古 在 加 后 兼容 ES3 方面 所 做 的 考 上 不 。 例 如 ， 跟 添加 
Array.prototype 属 性 不 一 样 ， 我 们 不 能 在 旧版 的 浏览 絮 中 使 用 “shim” 这 
i 
另外， 我 们 还 可 以 (通过 定义 nonmalleable 属 性 ) 在 具体 行为 中 运 
用 这 些 描述 符 : 


> Var person = {}; 


> Object.defineProperty(person, 'heads', {value: 1}); 


> person.heads = 0; 


0 

> person.heads; 

1 

> delete person.heads; 

false 

> person.heads; 

1 

下 面 ， 我 们 将 为 您 列 出 ES5 中 所 有 的 附加 Object 属 性 见 表 C-3。 
表 C-3 


属性 /方法 相关 说 明 


之 前 在 ES3 中 ， 我 们 往往 需要 通过 Object .prototype. 
isPrototypeof () 去 猜测 某 个 给 定 对 象 的 原型 是 什么 ， 如 今 
Object .getPrototypeOf (obj) 在 ES5 中 ， 我 们 可 以 直接 询问 该 对 象 “ 你 的 原型 是 什么 ?” 
> Object .getPrototypeof ([]) === 


Array.prototype; 
true 


正如 我 们 在 第 6 章 继 承 中 所 讨论 的 那样 ， 该 方法 主要 用 于 创建 
一 个 新 对 象 ， 并 为 其 设置 原型 ， 用 “上述 ) 属性 描述 符 定义 对 


象 的 原型 属性 。 
> Var parent = {hi: 'Hello'}; 
> Var 0 = Object.create(parent, { 
prop: { 
value: 1 
Object.create (obj, descr) } 
兴 这 
3 ©.hi 
"Hello" 
现在 ,我们 甚至 可 以 用 它 来 创建 一 个 完全 空白 的 对 象 ， 这 样 的 
事情 在 ES3 中 可 是 做 不 到 的 。 


> Var Oo = Object.create (nul]l); 
> typeof o.toSstring; 
"undefined" 
该 方法 可 以 让 我 们 详细 查看 一 个 属性 的 定义 。 您 甚至 可 以 通过 
它 一 帘 那 些 内 置 的 ， 之 前 不 可 见 的 隐藏 属 性 。 
> Object .getOwnPropertyDescriptor( 
Object .getOwnPropertyDescrip Object.prototype, 'toString'); 
tor (obj, property) Object 
configurable: true 
enumerable: false 
value: function toString() { [native code] } 
writable: true 


该 方法 返回 一 个 数组 , 其 中 包含 了 当前 对 象 所 有 属性 的 名 称 ( 字 
Object .getOwnPropertyNames 符 串 )， 不 论 它 们 是 否 可 枚 举 。 当 然 ， 您 也 可 以 用 Object. 
(obj) Keys () 方法 来 单独 返回 可 枚 举 的 属性 。 


> Object .getOownPropertyNames ( 
Object . prototype) ， 


属性 /方法 
Object.getOwnPropertyNames 


(obj) 


Object.defineProperty (obj, 


descriptor) 


Object.defineProperties (obj, 


descriptors) 


Object .preventExtensions (obj) 


Object.isExtensible (obj) 


相关 说 阴 


["constructor", "toString", "toLocaleString", 
"valueOf",... 


该 方法 可 通过 某 属 性 描述 符 来 定义 某 对 象 的 属性 。 详 细 内 容 可 
参考 我 们 在 当前 表格 之 前 所 做 的 讨论 。 


VY 


该 方法 的 作用 与 defineProperty() 基本 相同 ， 只 不 过 它 可 
以 用 来 一 次 定义 多 个 属性 。 
> var glass = 
Object.defineProperties({}, { 


"GOLGE™s 4 
value: "transparent", 
writable: true 

jy 

"Faullness"s 4 
Value: "half"， 
writable: false 


} 
}); 
glass.fullness; 
"half" 


preventExtensions () 方法 用 于 禁止 向 某 一 对 象 添加 更 多 
属性 , 而 isExtensible() 方 法 则 用 于 检查 某 对 象 是 否 还 可 以 
被 添加 属性 。 


> var deadline = {}; 

> Object.isExtensible (deadline); 
true 

> deadline.date = 
"yesterday" 

> Object. 
preventExtensions (deadline),，; 

> Object.isExtensible (deadline); 
false 

> deadline.date = 
"today" 

> deadline.date; 
"today" 


"yesterday"; 


"today"; 


属性 /方法 


Object .PreventExtensions (ob]j) 


Object.isExtensible (obj) 


Object. 


Object. 


Object. 


Object. 


seal (obj) 


isSealed (obj) 


freeze (obj) 


isFrozen (obj) 


Object .keys (obj) 


Array 
Array0 是 一 个 用 来 创建 数组 对 象 的 构造 器 ( 见 表 C-4) 


相关 说 明 
尽管 往 某 个 不 可 扩展 的 对 象 中 添加 属性 不 算是 一 个 错误 操作 ， 
但 它 没有 任何 作用 。 
> deadline.report = true; 


> deadline.report; 
undefined 


seal () 方 法 的 作用 与 preventExtensions () 基本 相同 , 但 
除 此 之 外 ， 它 还 会 将 所 有 现 有 属性 设置 成 不 可 配置 。 也 就 是 说 ， 
在 这 种 情况 下 , 我 们 只 能 变更 现 有 属性 的 值 , 但 不 能 删除 或 (用 
defineProperty() ) 重新 配置 这 些 属性 , 例如 不 能 将 一 个 可 
枚 举 的 属性 改 成 不 可 枚 举 。 
该 方法 用 于 执行 一 切 不 受 seal () 方法 限制 的 属性 值 变更 。 

> Var deadline = Object .freeze ( 

{date: "yesterday"}); 

> deadline.date = "tomorrow"; 

> deadline.excuse = "lame"; 

> deadline.date; 

"yesterday" 

> deadline.excuse; 

undefined 

> Object.isSealed (deadline); 

true 


该 方法 是 一 种 特殊 的 for-in 循环 。 它 只 返回 属于 当前 对 象 的 
属性 〈 不 像 for-in)， 而 且 这 些 属 性 也 必须 是 可 枚 举 的 〈 这 点 
与 Object .getOwnPropertyNames () 不同)。 返 回 值 是 一 个 
字符 串 数组 。 


> Object .Prototype .customProto = 

LOls 

> Object.getOwnPropertyNames ( 
Object .prototype); 

["constructor", "toString", ..., "customProto"] 

> Object.keys (Object .prototype); 

["customProto"] 

> Var oO = {own: 202}; 

> o.customProto; 

101 

> Object.keys (0o); 

["own"] 


数字 


> var a = new Array(1,2,3); 

当然 ， 我 们 同样 也 能 使 用 数组 标识 法 : 

> var a = [1,2,3]: /recommended 

需要 注意 的 是 ， 如 果 我 们 传递 给 Array() 构 造 器 的 是 一 个 数字 ， 该 
就 会 被 设 定 为 数组 的 长 度 。 

> var un = new Array(3); 

> un.length; 

3 

构造 器 将 会 根据 所 给 定 的 数组 长 度 来 创建 数组 ， 并 将 每 个 元 素 位 


置 以 undefined 值 填充 。 


> un; 
[undefined, undefined, undefined| 


以 此 方法 构建 的 数组 只 有 长 度 ， 却 不 含 元 素 。 这 种 数组 与 一 般 的 


有 元 取 的 数组 有 一 些微 妙 的 差别 : 


时 ) 
组 : 


> '0' in a; 

true 

> '0' in un; 

false 

这 一 差别 可 能 导致 Array0 构 造 器 的 使 用 方式 (在 只 有 一 个 参数 
与 你 的 预想 不 符 。 例 如 ， 下 面 是 一 个 用 数组 标识 法 创建 的 有 效 数 


>vara=[3.14|]; 

> al 

[3.14] 

然而 ， 如 果 我 们 将 该 浮 点 数 传递 给 Array0 构 造 右 的话 ， 束 会 出 


> var a = new Array(3.14) 


Range Error: invalid array length 
Array.prototype 的 成 员 
表 C-4 
属性 /方法 相关 说 明 
该 属性 返回 的 是 数组 中 元 素 的 个 数 


Length > [1,2,.3, 4] -Lengths 
4 
该 方法 主要 用 于 合并 数组 
SHONtat ls 1% TS so 


> Dlal -omnesat([3, Sl Lidl)y 

[1, 2, 3, 5, 7, 11] 
该 方法 用 于 将 数组 中 的 元 素 连 成 一 个 字符 串 。 我 们 可 以 通过 参数 来 
指定 元 素 之 间 的 分 割 字 符 串 ， 其 默认 值 是 逗号 

> [li23] .JR ; 

i ee 


join (separator) 
> [1,2,3] .join('|'); 
"1L1213" 


深 于 7 估 吕 | 0 亲 而 3 病 (1 二 二 ES 和 习 G 汪 

"1 is less than 2 is less than 3" 
该 方法 用 于 移 除 数组 中 的 最 后 一 个 元 素 ， 并 将 其 返回 

> var a = [Qnr ‘deux's ‘trois']: 


> a.pop(); 
PoP () "trois" 


> a;? 


[ une T 本 1 deux" ] 


该 方法 用 于 将 新 元 素 添 加 到 数组 的 末尾 ， 并 返回 修改 后 的 数组 
长 度 
Dustil; WW; LS ii SV 
> de zie zag webra ,mos')}y 
4 


属性 /方法 


reverse() 


shift() 


slice(start index, 


end index) 


sort (call back) 


相关 说 明 
该 方法 用 于 反 转 数组 中 的 元 素 顺 序 ， 并 返回 修改 后 的 数组 


> Var = [ly 为 引 3 

> a.reverse(); 

[37x 2 和 27 二] 

> 尖 

[37 芝 划 
该 方法 与 pop () 基本 相同 ， 只 不 过 这 里 移 除 的 是 首 元 素 ， 而 不 是 最 
后 一 外 元 吉 


> 
> aShift()s 
1 
> 喜 7 
[2，3] 
该 方法 用 于 截取 数组 的 某 一 部 分 ， 但 不 会 对 原 数组 进行 任何 修改 
> Var a = ['apple', ‘banana', 


eS"; Go", "OEANGS |] 
> a.slice(2,4); 


a > "css"] 


> a; 

["apple", "banana", "js", "css", "orange"] 
该 方法 主要 用 于 数组 的 排序 ， 它 有 一 个 可 选 参 数 ， 是 一 个 回调 函 
数 , 我 们 可 以 用 它 来 自 定义 排序 规则 。 该 函数 应 该 以 两 个 数组 元 
素 为 参数 ， 两 个 参数 相等 时 返回 0， 第 一 个 参数 大 时 返回 正 数 ， 
第 二 个 参数 大 时 返回 负数 
下 面 我 们 来 演示 一 个 按 数 字 顺 序 排序 的 自 定义 函数 (默认 是 按照 字 
符 顺序 的 ): 


function customSort(a, b)f{ 
if (a SB) Teturn ly 
if (a < b) return -1; 
return 0; 


属性 /方法 相关 说 明 
然后 ， 我 们 将 其 应 用 于 sort () 方法 : 
>». Va a = [lO0ls G9 ly S13 


> rE) 

Liy L011; 5 99] 

> a-Ssort (eustomSort); 
[7 5 99, 101] 


SoOrt(Call Back) 


> [16r3,9)] -Sort (eustomSort)} 

[55 6; 7; 9] 
该 方法 可 在 删除 元 素 的 同时 添加 新 的 元 素 。 第 一 个 参数 所 表示 的 是 要 
删除 元 素 的 始 起 位 置 ， 第 二 个 参数 代表 的 是 要 删除 元 素 的 个 数 ， 其 余 
参数 则 都 是 一 些 将 要 插入 在 此 处 的 新 元 素 


splice(start, delete_ > Var Se | GPELe', "bariana"; 


Gout Ly TD Tye::) 'js', 'css', 'orange']; 

> a.splice(2, 2, 'pear', 'pineapple'); 

| (We "css"] 

> 

["apple","banana","pear","pineapple","orange"] 
该 方法 的 功能 与 push () 方 法 类 似 ， 只 不 过 元 素 将 会 被 添加 到 数组 的 
开始 处 ， 而 不 是 末尾 处 。 另 外 和 shift () 方 法 一 样 ， 它 也 会 在 添加 完 
元 素 后 返回 修改 后 的 数组 长 度 


相近 克也 世 下 世上， 多 > Var a = [了 > 
> 
5 
> 


[Tone "tw 2 3] 


在 ECMAScript 5 中 增加 的 Array 属 性 
表 C-5 
属性 /方法 相关 说 明 
用 于 分 辨 某 个 对 象 是 否 是 数组 
由 于 typeof 无 法 分 辨 数组 : 


Array. 


isArray (obj) 


属性 /方法 相关 说 明 


> Var arraylike = {0: 101, length: 1}; 
> typeof arraylike; 

"object" 

> typeof[]; 

"object" 


同样 无 效 的 还 有 “鸭子 类 型 ”( 所 谓 “ 鸭 子 类 型 ”是 动作 ， 语 言 中 的 一 
种 类 型 风格 ， 它 的 理论 基础 是 : 如 果 一 只 乌 儿 走 起 来 像 鸭 子 并 且 叫 起 
来 也 像 鸭 子 ， 那 么 它 就 是 鸭子 ): 


typeof arraylike.length; 
"number" 


Array. 在 ES3 中 ， 为 判断 数组 ， 我 们 需要 这 么 处 理 : 

> Object.prototype.toString.call([]) 
=== "[object Array]"; 

true 


isArray (obj) 


> Object.prototype.toString.call (arraylike) 
=== "object Array"; 
false 


在 ES5 中 ， 我们 有 了 更 为 简短 的 方法 : 
> Array.isArray ([]); 
true 


> Array.isArray (arraylike); 

false 
搜索 数组 ， 返 回 第 一 个 匹配 元 素 的 下 标 。 如 果 没 有 匹配 项 ， 该 函数 返 
回 -1。 第 二 个 参数 为 可 选项 ， 为 搜索 的 起 始 下 标 


> Var ar = {'one', 'two', ‘'one', ‘'two'}; 
> ar.indexOf (two); 

Array.prototype. 1 

indexOf (needle, idx) > ar.indexof('two's, 2);} 
3 


> ar.indexOf'('toot"'); 
-1 


与 indexof () 的 功能 类 似 。 从 后 往 前 地 搜索 数组 


属性 /方法 


Array.prototype. 


lastIndexOf (needle, 


Array.prototype. 
forEach (callback, 
this_ obj) 


Array.prototype. 
every (callback, 


this_obj) 


idx) 


相关 说 明 


> Var ar = ['one', 'two', ‘'one', ‘two']; 
> ar.lastIindexOf ('two'); 
3 


> ar.lastIndexOf ('two 2); 


> ar.indexof'(" toot"); 

-1 
for 循环 语法 的 替代 。 自 定义 的 callback 函数 会 为 每 个 数组 元 素 执 
行 一 次 。callback 函数 会 收 到 三 个 参数 : 本 次 循环 的 元 素 ， 该 元 素 
的 下 标 ， 以 及 整个 数组 


> Var log = console.log.bind(console); 
2 var a = ["itey"rs “SpOem 
> ar.forEach (lo0g); 

itsy 0 ["itsy", "bitsy", "spider"] 
bitsy 1 ["itsy", "bitsy", "spider"] 
spider 2 ["itsy", "bitsy", "spider"] 


forEach 函数 的 第 二 个 参数 为 可 选项 ， 该 参数 为 callback 函数 的 
调用 者 。 以 下 代码 与 上 述 代码 等 价 : 


> ar.forEach (console.log, console); 


自 定义 的 callback 函数 会 为 每 个 元 素 执 行 一 次 .每 次 执行 都 应 根据 
元 素 返 回 true 或 者 false， 代 表 该 元 素 是 否 通 过 测试 。callback 
获得 的 参数 与 forEach 相同 。 
如 果 所 有 元 素 都 通过 了 测试 ，every () 函数 返回 true。 反 之 ， 如 果 
至 少 有 一 个 元 素 未 通过 测试 ，every () 函数 返回 false 

> function hasEye (el, idx, ar) { 

return el.indexOf ('i') !== -1; 

} 

> ['itsy', '‘'bitsy', 'spider'] .every (hasEye); 

true 


> ['eency', ‘'weency', 'spider' ]， 
every (hasEye); 
false 


属性 /方法 


Array.prototype. 
some (callback, 


this obj) 


Array.prototype. 
filter(callback, 
this: G5) 


Array.prototype. 
map (callback, 
this obj) 


Array.prototype. 


reduce (callback, start) 


相关 说 明 


循环 中 ， 若 every () 结果 显然 为 false， 则 循环 会 中 止 并 且 立 即 返 
回 false 
> [1,2,3] .every (function (e) { 
console.1log (e); 


return false; 


] 寺 党 
于 
false 


与 every () 类 似 ， 返 回 值 为 “是 否 至 少 有 一 个 元 素 通 过 测试 ”: 
> ['itsy', 'bitsy', "spider'] .some (hasbye); 
true 


> ['eency', 'weency', 'spider']. 
some (hasEye); 
true 
与 some () 及 every() 类 似 ， 返 回 所 有 符合 测试 的 元 素 : 
>» ['itSy';, “ES .filter (aspEye)'s 
[各 itsy" "bitsy" 5 spider" ] 


> ['eency', 'weency', 'spider'] .filter (hasEye); 
["spider"] 
与 forEach 类 似 。 返 回 值 为 数组 ， 数 组 元 素 为 每 次 callback () 函 
数 的 返回 值 。 这 个 例子 会 将 数组 元 素 内 的 字母 都 转 为 大 写 : 
> function uc(element, index, array) 1{ 


return element.toUpperCase () ; 


} 
> ['eency', 'weency', 'spider'] .map (uc); 
["EENCY", "WEENCY", "SPIDER"] 


为 每 个 元 素 执 行 一 次 callback 函数 。 每 次 callback 的 返回 值 都 
会 作为 下 一 次 循环 的 参数 。 最 终 ， 对 整个 数组 的 操作 将 返回 一 个 单一 
的 值 。 

> function suml(res, element, idx, arr) { 


return res + element; 


} 
> [1, 2, 3] .reduce (sum); 
6 


属性 /方法 相关 说 明 
start 参 数 为 可 选 参 数 ， 如 果 设 置 ， 将 作为 第 一 次 callback() 执 


Array.prototype. 行 时 的 传 入 参数 : 
reduce (callback, start) > 
106 


与 reduce () 类 似 ,但 从 后 到 前 地 遍历 数组 元 素 : 


> functidon, Soncat (esult so foam; SL) :1 


eturn, wT 必 EGSUTE, SO Far TEL 
Array.prototype. } 
reduce (callback, start) > [1l, 2, 3].reduce(concat); 
a rc 


2 Ll, 2 BredueeRight (eoneat): 


Function 

在 JavaScript 中 ， 芳 数 也 是 一 种 对 象 ， 可 以 通过 Function() 构 造 器 
来 定义 ， 例 如: 

> var sum = new Function('a', 'b', 'return a + b;'); 

这 与 下 面 的 函数 标识 法 执行 效果 是 相同 的 。 但 在 大 多 数 情 况 下 ， 
我 们 并 不 圾 励 上 述 做 法 : 


> var sum = function(a, b){ 


return a + b; 
下 
当然 ， 我 们 还 有 更 常见 的 函数 定义 方式 : 


> function sum(a, b){ 


returna+b:; 


} 
Function.prototype 的 成 员 


表 C-6 


属性 /方法 相关 说 明 


该 方法 主要 用 于 在 当前 对 象 的 this 值 上 调用 其 他 函数 。apply () 的 第 一 
个 参数 所 引用 的 是 将 要 绑 定 到 this 值 上 的 函数 对 象 。 而 第 二 个 参数 是 一 
个 数组 ， 用 于 存储 调用 该 函数 对 象 时 所 需 的 参数 。 
function whatIsIt()t{ 
eturm this. EOStrLNg()? 


} 

params array) > Var myobj = {}; 
> whatIsIt.apply (myObj); 
"[object Object]" 


apply (this obj, 


> whatIsIt.apply (window); 
"[object Window]" 
call (this_obj， pl，| 该 方法 与 apply () 基本 相同 ， 只 不 过 其 调用 函数 所 需 的 参数 是 一 个 一 个 传 
Bp BBy md 递 的 ， 而 不 再 是 一 个 数组 
该 属性 返回 的 是 函数 所 预期 的 参数 个 数 


> parseInt.1length; 


2 
让 我 们 来 看 一 下 cal1 () 与 apply () 两 个 函数 在 这 一 属性 上 的 差异 : 
length > Function.prototype.call.length; 
下 


> Function.prototype..apply.length; 
2 


call () 的 length 属性 值 为 1， 因为 该 函数 只 有 第 一 个 参数 为 必须 参数 。 


ECMAScript 5 对 Function 的 附加 支持 
表 C-7 


属性 /方法 相关 说 明 


通过 此 函数 可 以 为 函数 调用 指定 this 值 。call () 方 法 与 apply () 方 法 
会 直接 执行 函数 ， 而 bind () 方法 会 返回 新 的 函数 。 比 较 常 用 的 场景 是 ， 
当 你 需要 将 A 方法 作为 B 对 象 的 某 个 方法 的 回调 函数 , 而 我 们 希望 A 方法 
的 this 指向 另 一 个 对 象 时 

> whatIsIt.apply (window); 

"[object Window]" 


Function.prototype. 


bind() 


Boolean 


Boolean() 构 造 器 所 创建 的 是 一 个 布尔 类 型 的 对 象 (这 并 不 等 同 于 
基本 布尔 类 型 ) 。 由 于 这 种 布尔 对 象 的 实际 作用 很 有 限 ， 因 此 这 里 将 
它 列 出 来 ， 完 全 只 是 出 于 知识 的 完整 性 考虑 。 

> var b = new Boolean(); 

> b.valueOf(); 

false 


> b.toString(); 


"false" 

需要 注意 的 是 ， 布 尔 对 象 与 基本 布尔 值 并 不 相同 。 正 如 我 们 所 了 
解 的 ， 所 有 对 象 本 质 上 都 属于 truthy 值 。 

> b === false; 

false 

> typeof b; 

"object" 

另外 ， 除 了 从 Object 中 继承 来 的 内 容 外 ，Boolean 对 象 中 并 没有 任 
何其 他 属性 。 

Number 

下 面 我 们 来 创建 一 个 数字 对 象 : 

> varn= new Number(101); 

> typeof Di; 

"object" 

> n.valueOf(); 

101 

需要 注意 的 是 ，Number 对 象 并 不 等 同 于 基本 数字 类 型 ， 但 如 果 我 
们 在 某 个 基本 数字 类 型 值 上 调用 了 一 个 Numberprototype 的 方法 ， 那 么 
该 基本 数字 类 型 就 会 被 自动 转换 成 Number 对 象 ， 例 如 : 


> var n = 123; 


> typeof Di; 
"number" 
> n.toString(); 
"123" 
脱离 new 修 饰 符 而 单独 使 用 的 Number0O 画 数 返回 基本 数字 类 型 。 
> Number("101"); 
101 
> typeof Number("101"); 
"number" 
> typeof new Number("101"); 
"object" 
Number 构 造 右 的 成 员 
表 C-8 


属性 /方法 相关 说 明 


该 属性 返回 是 一 个 常量 〈 不 可 变 的 )， 表 示 该 对 象 所 能 取 的 最 大 值 
> Number .MAX VALUE; 


Number .MAX VALUE 
1.7976931348623157e+308 


该 属性 返回 的 是 JavaScript 中 的 最 小 值 
> Number .MIN VALUE:， 
5e-324 


Number .MIN VALUE 


该 属性 返回 的 是 一 个 表示 “Not A Number” 的 值 


> Number.NaN; 


Number .NaN Na 
NaN 与 任何 值 都 不 相等 ， 包 括 它 自己 。 
> Number .NaN === Number. NaN; 
false 
Number .POSITIVE INFINITY 与 全 局 变量 Infinity 一 样 
Number .NEGATIVE INFINITY 与 -Infinity 一 样 


Number 对 象 的 成 员 
表 C-9 


属性 /方法 相关 说 明 
该 方法 将 返回 一 个 字符 串 ， 以 定点 小 数 的 形式 来 表示 某 一 
数字 ， 并 进行 四 舍 五 入 
> Var n = new Number (Math.PI) ， 


toFixed (fractionDigits) > MW deGE 人， 
3.141592653589793 


Fl1ReQ(e) 


"3.142" 
该 方法 将 返回 一 个 字符 串 ， 以 指数 形式 来 表示 某 一 数字 ， 
toExponential 并 进行 四 舍 五 入 
(fractionDigits) > Var n = new Number (56789) ; 


> n.topxponential (2) ， 
"5.68e+4" 


该 方法 将 返回 一 个 字符 串 ， 其 表示 的 数字 形式 既 可 以 是 指 
数 型 的 ， 也 可 以 是 定点 小 数 型 的 
> Var n = new Number(56789) ; 


> n.toPrecision(2) 
"5.7e+4" 


3 noPreclsLon(d) : 


toPrecision (precision) 
"56789" 


> n.toprecision(4); 
"5.679e+4" 


> var n = new Number (Math.PI); 
> n.toPrecision(4); 
"3.142" 


String 

String0 是 一 个 用 于 创建 字符 串 对 象 的 构造 器 ， 如 果 我 们 在 一 个 基 
本 字符 串 值 上 调用 属于 该 对 象 的 方法 ， 那 么 该 字符 串 束 会 被 目 动 转换 
为 String 对 象 。 

下 面 ， 我 们 来 创建 一 个 字符 串 对 象 和 一 个 基本 字符 串 : 

> Var s_obj = new String('‘potatoes'); 


> var s_prim = PotatoeSs ; 


> typeof s_obj; 

"object" 

> typeof s_prim; 

"string" 

当 我 们 使 用 === (严格 等 于 ) 比较 该 对 象 和 基本 类 型 时 ， 它 们 是 
相等 的 。=== 与 == 的 不 同 点 在 于 后 者 会 目 动 进行 类 型 转换 。 

> s_obj === s_prim; 

false 

> s_obj == s_prim; 

true 

length 这 个 属性 实际 上 是 字符 串 对 象 的 。 

> s_obj.length; 

8 

如 果 我 们 在 一 个 不 属于 对 象 的 基本 字符 串 上 访问 length 属 性 ， 该 字 
符 串 就 会 自动 被 转换 成 相应 的 对 象 ， 并 成 功 返 回 字 符 串 长 度 ， 比 如 : 

> S_prim.length; 

8 

字符 串 标 识 法 同样 有 效 : 

> "giraffe".length; 

7 

String0) 构 造 侣 的 成 员 


表 C-10 
属性 /方法 相关 说 阴 
该 方法 会 根据 用 户 输入 的 字符 编码 来 创建 字符 串 ， 并 将 其 返回 


> 七 7 人 EEomChareCode (5 99 二 14， 
CGOde2: "COG: :md) 105, 112, 116); 


String.fromCharCode (codel, 


"script" 


String.prototype 的 成 员 


属性 /方法 


length 


charaAt (position) 


charCodeAt (position) 


GONeat (Str1 St su) 


indexOf (needle, start) 


lastIndexOf (needle, 


start) 


localeCompare (needle) 


表 C-11 


相关 说 明 
该 属性 返回 字符 串 中 的 字符 数量 
> new String('four').length 


4 
该 方法 返回 指定 位 置 处 的 字符 ， 位 置 从 0 开始 计数 


> "Script". charaAt (0); 
人 


从 ES5 开始 ， 也 可 以 使 用 数组 标识 法 来 代替 。 其 实在 ES5 之 前 ， 
这 个 特性 长 久 以 来 就 被 正 以 外 的 浏览 器 广 为 支 持 


六 "Beript"™(0)> 
-LL 


该 方法 返回 指定 位 置 处 字符 的 Unicode 编码 
> "script".charCodeAt (0) ， 
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该 方法 利用 当前 字符 串 将 输入 中 的 各 个 子 串 连 接 成 一 个 新 的 字符 串 
> 
"zi . -Zag 1 


该 方法 用 于 返回 匹配 串 的 起 始 位 置 。 第 二 个 参数 是 可 选 的 ， 
用 于 指定 搜索 的 开始 位 置 。 如 果 方 法 没有 找到 匹配 串 ， 就 会 
返回 -1 

> Javaseript”" indexQf( ser )} 

4 


> "Javaseript" .EndexOf('Sor’; 3S)s 
-1 


该 方法 与 indexof () 的 功能 基本 相同 ， 只 不 过 它 的 搜索 是 从 后 面 
开始 的 ， 例 如 我 们 要 搜索 字符 串 中 的 最 后 一 个 “a”: 


"javasceript" lastIinderorf( a )s 
3 


该 方法 会 将 两 个 字符 串 放 在 当前 区 域内 进行 比 对 ， 如 果 两 个 字符 
串 完全 相同 就 返回 0， 如 果 比 较 时 needle 中 的 字符 序列 靠 前 就 返 
回 1， 和 否则 就 返回 -1 


续 表 


属性 /方法 


localeCompare (needle) 


match (regexp) 


replace (needle, 


replacement) 


search (regexp) 


slice(start, end) 


split (separator, limit) 


相关 说 明 
> "script".localeCompare('crypt'); 
:1 


> "script".localeCompare('sscript'),，; 
-1 


> "script".localeCompare('script"'); 


0 
该 方法 会 根据 其 接受 的 正则 表达 式 对 象 返回 一 个 容纳 所 有 匹配 串 
的 数组 


> "R2-D2 arnid 'C-3PO" .match(/ [0=9]/g) 7 
”i ”Se | 
该 方法 用 于 替换 字符 串 对 象 中 所 有 匹配 相关 正则 表达 式 的 内 容 。 
另外 ， 我 们 还 可 以 通过 replacement 参数 设置 一 系列 不 同 的 匹配 模 
式 ， 例 如 $1、$2、…… 、$9 
> "R2-D2" replace (/2/9g; '~two'); 
"R-two-D-two" 
> "R2-D2".replace (/(2) /gs "$1$1"); 
"R22-D22" 
该 方法 会 返回 正则 表达 式 匹 配 的 第 一 个 子 串 的 位 置 
> "C-3PO" .search(/[0-9]7/) 
2 


该 方法 会 返回 字符 串 中 start 到 end 之 间 的 部 分 。 如果 start 的 
值 是 个 负数 , 那么 开始 位 置 实 际 上 等 于 length+start, 同样 的 ， 
如 果 end 的 值 是 负数 ， 其 结束 位 置 等 于 length+end 


> "R2-D2 and C-3PO".slice(4,13); 
"2 and C-3" 


> "R2=D2 and C-3PO".slice(4,=1)} 

"2 and C-3P" 
该 方法 可 以 将 字符 串 转换 成 一 个 数组 。 它 的 第 二 个 参数 1imit 是 
可 选 的 。separator 参数 是 一 个 正则 表达 式 ， 也 可 以 是 字符 串 

> Wl LE 0 

| 时 3 | 


> eR ol i 
LY | 


属性 /方法 相关 说 明 


该 方法 的 功能 与 slice () 基本 相同 。 如 果 start 或 end 为 负 值 或 
无 效 值 时 ， 它 们 会 被 视 为 0。 如 果 它 们 的 值 大 于 length， 则 都 会 被 
视 为 length。 如 果 end 大 于 start， 则 它们 会 自动 交换 彼此 的 值 
substring(start eng) > "R2-D2 and C-3PO".substring(4, 13); 
"2 and C-3" 


"R22- D2 nd -SE0" -SnBetring (3 4)8 
"2 and C-3" 


这 两 种 方法 都 可 将 字符 串 内 容 转 换 为 小 写 


> "JAVA".toLowerCase () 


toLowerCase () 


toLocaleLowerCase() 
1T Java my 


这 两 种 方法 都 可 将 字符 串 内 容 转 换 为 大 写 
3 "SCOript" EGUpBerCase()? 
"SCRIPT" 


toUpperCase () 


toLocaleUpperCase() 


ECMAScript5 对 String 的 补充 
表 C-12 
相关 说 明 
在 ES3 中 ， 我 们 通过 使 用 正则 表达 式 相 关 的 方式 来 移 除 字符 串 首 
末 的 空 字符 。 在 ES5 中 ， 我 们 有 了 专门 的 函数 trim() : 


> NE beargd, N.Crml()s 


属性 /方法 


String .prototype. 


tim ( ) "peard" 
也 可 以 使 用 ES3 的 方式 : 
> " \t beard \n".replace(/\s/g, ""); 
"beard" 
Date 


Date0 构 造 右 可 以 有 以 下 几 种 不 同 的 输入 类 型 。 

我 们 可 以 分 别 将 年 、 月 、 日 、 小 时 、 分 钟 以 及 毫秒 的 值 传递 给 构 
千 器 ， 例 如 : 

> new Date(2015, 0, 1, 13, 30, 35, 505); 

Thu Jan 01 2015 13:30:35 GMT-0800 (PST) 


上 面 所 列 出 的 这 些 参数 ， 都 征 可 以 跳 过 的 ， 在 这 种 情况 下 它们 会 


被 默认 为 0。 要 注意 的 是 ， 月 份 的 值 是 从 0 (一 月 ) 到 11 (十 二 月 ) 
的 ， 小 时 的 值 是 从 0 到 23 的 ， 分 钟 和 秒 数 的 值 都 是 0 到 59， 人 秒 数 则 是 
从 0 到 999 。 


间 : 


我 们 可 以 传递 给 构造 匿 一 个 时 间 鹤 ; 

> new Date(1420147835505); 

Thu Jan 01 2015 13:30:35 GMT-0800 (PST) 

如 朱 我 们 没有 传递 给 构造 鼠 任 何 参数 ， 写 驶 会 返回 当前 日 期 /时 


> new Date(); 
Fri Jan 11 2013 12:20:45 GMT-0800 (PST) 
如 采 我 们 传递 的 是 一 个 字符 串 ， 那 么 它 会 目 动 分 析 并 提取 该 字符 


串 中 的 有 效 日 期 信息 : 


> new Date(May 4, 2015 ); 
Mon May 04 2015 00:00:00 GM1T-0700 (PDT) 
不 使 用 new 修 饰 符 而 直接 调用 Date() 获 得 的 是 当前 时 间 的 字符 串 形 


> Date() === new Date().toString(); 
true 
Date() 构 造 絮 的 成 员 

表 C-13 


属性 /方法 


相关 说 明 


Date.parse (string) 


该 方法 的 作用 与 直接 将 字符 串 传递 给 new Date () 类 似 ， 它 会 分 析 参 
数字 符 串 中 的 日 期 信息 并 返回 相应 的 时 间 戳 ， 如 果 失 败 则 返回 
2015'); 


NaN 


> Date.parse('May 5， 
1430809200000 


> Date.parse('4th'); 
NaN 


Date.UTC (year, month, date, 


hours, minutes, seconds, ms) 


Date.prototype 的 成 员 


该 方法 返回 的 也 是 一 个 时 间 惟 ， 只 不 过 这 回 是 UTC 时 间 ( 即 
Coordinated Universal Time )， 不 是 本 地 时 间 


了 ESTEIL20157 05 lz l3s .3905 
1420119035505 


35F 057 


表 C-14 


属性 /方法 


toUTCString() 


toDateSstring () 


toTimeString () 


toLocaleString () 
toLocaleDateString() 


toLocaleTimeString () 


getTime () 


setTime (time) 


相关 说 明 及 示例 

该 方法 与 toString () 基本 相同 ， 但 返回 的 是 UTC 时间 ， 下 面 我 们 

来 看 看 太平 洋 时 间 (PST)、 本 地 时 间 与 UTC 之 间 究 竟 有 哪些 不 同 : 
> var d = new Date(2015, 0, 1); 


> dtoStringl()'s 
"Thu Jan 01 2015 00:00:00 GMT-0800 (PST)" 


> d.toUuTCSstring(); 
"Thu, 01 Jan 2015 08:00:00 GMT" 


该 方法 只 返回 tostring () 中 的 日 期 部 分 : 
> new Date(2015, 0, 1) .toDateSstring(); 
"Thu Jan 01 2015" 
该 方法 只 返回 tostring () 中 的 时 钟 部 分 : 
> new Date(2015, 0, 1).toTimeString (); 
"00:00:00 GMT-0800 (PST)" 
这 三 个 方法 基本 上 分 别 与 tostring()、toDateString() 以 及 
toTimeString() 等 效 。 但 格式 更 为 友好 ， 能 使 用 当前 用 户 所 设置 
的 方式 来 显示 信息 
> new Date (2015，0，1) .toString() : 
"Thu Jan 01 2015 00:00:00 GMT-0800 (PST)" 


> new Date (2015，0，1) .toLocaleString() ; 
"1/1/2015 12:00:00 AM" 


这 组 方法 用 于 获取 或 设置 某 一 Date 对 象 中 的 时 间 (以 时 间 惟 的 形 
式 )。 在 下 面 的 示例 中 ， 我 们 演示 了 如 何 创建 一 个 Date 对 象 ， 并 将 它 
的 日 期 后 移 一 天 : 

> var d = new Date(2015, 0, 1);} 


> d.getTime () ， 
1420099200000 


> Q.setTime (Q.getTime () 
+ 1000 二 60 关 69 * 二 人) 
1420185600000 


> d.toLocaleString(); 
"Fri Jan 02 2015 00:00:00 GMT-0800 (PST)" 


续 表 


属性 /方法 


getFullYear () 
getUTCFullYear () 
setFullYear (year, month, 
date) 

setUTCFullYear (year, 


month, date) 


getMonth () 
getUTCMonth () 
setMonth (month, date) 


setUTCMonth (month, date) 


getDate () 
getUTCDate () 
setDate (date) 


setUTCDate (date) 


相关 说 明 及 示例 


这 组 方法 用 于 获取 或 设置 Date 对 象 中 的 全 年 份 信息 (包括 本 地 时 间 
和 UTC 时 间 )。 在 这 里 不 能 用 getYear () ， 因 为 它 并 不 适用 于 公 
元 两 千年 之 后 的 年 时 ， 所 以 还 是 使 用 getFullYear () 方法 为 好 


> var d = new Date(2015, 
> d.getYear (); 
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> 'd.getFullYear(): 
2015 


> d.setFullYear (2020) ， 
1577865600000 


0 


Wed Jan 01 2020 00:00:00 GMT-0800 (PST) 


0, 


LY 


这 组 方法 用 于 获取 或 设置 Date 对 象 中 的 月 份 信息 ， 它 是 从 0 (一 月 ) 


开始 计数 的 : 


> Var d = new Date(2015, 
> d.getMonth (); 
0 


> d.setMonth (11); 
1448956800000 


> d.toLocaleDateString(); 
L214/2015" 


这 组 方法 用 于 获取 或 设置 Date 对 象 中 的 日 期 信息 


> var d = new Date(2015, 
> d.toLocaleDateString();，; 
"1/1/2015" 


> d.getDate () ， 
1 


> d.setDate (31) ; 
1422691200000 


> d.toLocaleDateString (); 
“1/31/2015" 


0, 


0, 


1); 


1); 


属性 /方法 相关 说 明 及 示例 
getHours () 
getUTCHours () 


setHours (hour, min, sec, 


ms) 


setUTCHours (hour, min, 


sec, ms) 
这 组 方法 分 别 用 于 获取 或 设置 Date 对 象 中 的 小 时 、 分 钟 、 秒 数 及 毫 
秒 数 信息 。 它 们 都 是 从 0 开始 计数 的 
> var d = new Date(2015, 0, 1);} 


setMinutes (min, sec, ms) > d.getHours() + ':' + d.getMinutes (); 
nO:0" 


getMinutes () 


getUTCMinutes () 


setUTCMinutes (min, sec, 


Wy) > d.setMinutes (59) ， 

getSeconds () 1420102740000 

getUTCSeconds () EM 
setSeconds (sec, ms) O59" 


setUTCSeconds (sec, ms) 

getMilliseconds () 

getUTCMilliseconds () 

setMilliseconds (ms) 

setUTCMilliseconds (ms) 
该 方法 用 于 返回 本 地 时 间 与 UTC 时 间 之 间 的 差距 ， 以 分 钟 为 单位 。 例 
如 下 面 实现 的 是 PST〈 即 Pacific Standard Time) 与 UTC 之 间 的 差距 : 


> new Date() .getTimezoneOffset () ， 


getTimezoneOffset () 
480 
> 420 / 60; // hours 
8 
这 组 方法 返回 的 是 当前 时 间 的 星期 数 ， 从 0 〈 星 期 日 ) 开始 : 
getDay () 


> var d = new Date(2015, 0, 1); 
getUTCDay () > d.toDatestring(); 
"Thu Jan 01 2015" 


属性 /方法 相关 说 明 及 示例 


> q.getDay() ， 
4 


getDay () > var d = new Date(2015，0，4); 
> :EoDatesString (大 

getUTCDay () "Sat Jan 04 2015" 
> d.getDay () ; 

0 


ECMAScript5 对 Date 的 补充 
表 C-15 
属性 /方法 相关 说 明 


Date .now () 


获得 当前 时 间 惟 的 快捷 方法 : 
> Date.now() === new Date () .getTime () ; 
七 ZUe 


toString() 方 法 的 一 种 变种 ; 
> var d = new Date(2015, 0, 1); 
> QoS) 


Date.prototype. "Thu Jan 01 2015 00:00:00 GMT-0800 (PST)" 


tOTSOSEELINnG () > .tauUTCStrd ne() 


"Thu, 01 Jan 2015 08:00:00 GMT" 


> dtoLSOStr1no()S 
"2015-01-01T00:00:00.0002Z" 


返回 值 与 toISOString () 一样 ,该 函数 被 JSON. stringify () 
Date.prototype. 调用 ( 见 本 篇 附录 末 ) 
toJSON () > var d = new Date(); 


> d.toJSON() === d.toISOString(); 
true 


Math 

Math 对 象 的 情况 与 其 他 内 建 对 象 稍 许 有 些 不 同 ， 因 为 它 不 能 被 用 
做 构造 器 来 创建 对 象 。 实 际 上 ， 它 只 不 过 是 一 组 相关 函数 和 和 常量 的 集 
合 而 已 。 下 面 我 们 通过 一 些 具 体 的 实例 来 看 看 究竟 有 哪些 不 同 : 

> typeof Date.prototype; 


"object" 


> typeof Math.prototype; 


"undefined" 
> typeof String; 
"function" 
> typeof Math:; 
"object" 
已 
Math 对 象 的 成 员 
表 C-16 
属性 /方法 
> Mat EB 
2.718281828459045 
> Math.LN10; 
2.302585092994046 
Math.E 
Math .LN10 > Math.LN2; 
0.6931471805599453 
Math .LN2 
Math .LOG2E > Ma BOGeEs 
1.4426950408889634 
Math .LOG1OE 
> Math.LOG1O0E; 


Ma xB 
0.4342944819032518 


Math.SQRT1 2 
> Math.PI; 
3.141592653589793 


Math .SQRT2 


> Math.SORT1 2; 
0.7071067811865476 


> Math SORTZ2; 
1.4142135623730951 


这 里 列 出 的 都 是 一 些 常 用 的 数学 常量 ， 都 是 只 读 的 。 下 面 是 它们 各 自 的 值 : 


属性 /方法 
Math.acos (x) 
Math.asin (x) 
Math.atan (x) 
Math.atan2 (y, x) 
Math.cos (x) 
Math.sin (x) 


Math .tan (x) 


Math.round (x) 
Math .floor (x) 


Math.ceil (x) 


Math .max (numl, 
光大 而 分 “过 让 直入， as) 
Math .min (numl， 


TEA cre) 


Math .abs (x) 


Math .exp (x) 


Math.1og (x) 


相关 说 明 


这 是 对 象 中 的 三 角 函 数 集合 


round () 方法 用 于 返回 最 接近 本 值 的 整数 ， 而 ceil() 用 于 向 上 取 整 ， 
floor () 则 用 于 向 下 取 整 


> Math.round(S5.5)» 
6 


3s Math. fl00F (S535). 


>» Math eeil(5 1T) 7 
6 


max () 和 min () 这 两 个 方法 分 别 用 于 返回 其 参数 中 的 最 大 值 和 最 小 值 。 
但 如 果 参 数列 表 中 有 一 个 值 为 NaN， 那 么 两 个 方法 都 返回 NaN 


> Math.max(4.5 101, Math.PI) 
101 


区 Mathmin(td.S5: 101, Math, PPI); 
3.141592653589793 


该 方法 用 于 返回 参数 的 绝对 值 


> Math.abs (-101) ; 
101 


> Math.abs (101); 
101 


指数 函数 : 返回 e (Math.E) 的 x 次 方 


> Math.exp(1) === Math.E; 
true 


取 x 的 自然 对 数 


> Math.log(10) === Math.LN10; 
true 


属性 /方法 相关 说 明 
取 x 的 平方 根 
> Mat ret 


Math Sort (x) 3 


> Math.sqrt (2) === Math.SQRT2 
true 
取 x 的 y 次 方 
Math.pow (x, y) Math Dow (3 Z)y 
9 
该 方法 用 于 返回 0 到 1 之 间 的 随机 数 〈 包 括 0) 


> Math.random(); 
0.8279076443185321 


如 果 我 们 想得到 10 至 100 之 间 的 随机 整数 ， 可 使 用 如 下 方式 : 
> Math.round (Math.random() * 90 + 10);，; 
79 


Math.random() 


RegExp 

RegExp0) 是 一 个 用 于 创建 正则 表达 式 对 象 的 构造 器 ， 其 第 一 个 参 
数 是 正则 表达 式 的 匹配 模式 ， 第 二 个 参数 则 是 该 匹配 模式 的 修饰 符 。 

> var re = new RegExp([dnljo+dle', ‘gmi'); 

该 对 象 的 模式 可 以 匹配 “noodle”、“doodle”、“doooodle” 等 。 当 然 ， 
我 们 也 可 以 用 正则 表达 式 标识 法 来 创建 同样 的 对 象 : 

> var re = (/[dnjo+dle/gmi); // recommended 

关于 正则 表达 式 的 更 详细 信息 ， 读 者 可 以 参考 第 4 章 : 对 象 和 附录 
D: 正则 表达 式 中 的 相关 内 容 。 

RegExp 对 象 的 成 员 

表 C-17 


属性 /方法 相关 说 明 


global 只 读 属 性 ， 当 且 仅 当 regexp 对 象 被 设置 了 g 修饰 符 时 为 true 
ignoreCase 只 读 属性 ， 当 且 仅 当 regexp 对 象 被 设置 了 i 修饰 符 时 为 true 
multiline 只 读 属 性 ， 当 且 仅 当 regexp 对 象 被 设置 了 m 修饰 符 时 为 true 


返回 字符 串 中 下 一 个 匹配 串 的 开始 位 置 。 当 然 ， 该 方法 也 只 有 在 test () 和 
exec () 成功 匹配 之 后 ， 且 当 g(global) 修饰 符 被 设 定 时 才 有 效 


> Var re = /[dn]otdle/g; 
> re.lastIindex; 
0 


> re.exec ("noodle doodle"); 
["noodle"] 


> re.lastIindex; 
lastIndex 6 


> re.exec ("noodle doodle") ; 
["doodle"] 


> re.lastIindex; 
13 


> re.exec ("noodle doodle"); 
null 


> re.lastIindex; 


0 
只 读 属 性 ， 返 回 的 是 该 正则 表达 式 的 模式 〈 不 包含 修饰 符 ) 
source > var re = /I[ndlotdle/gmi; 


> re.source; 
" [nd]o+dle" 


该 方法 会 对 其 输入 字符 串 进 行 正 则 匹配 ， 一 旦 匹配 成 功 ， 就 以 数组 的 形式 
返回 所 有 的 匹配 串 或 匹配 分 组 。 并 且 ， 当 对 象 被 设置 有 g 修饰 符 时 ， 该 方 
法 会 自动 确定 第 一 个 匹配 串 ， 并 对 lastIndex 属性 进行 相关 的 设置 。 但 
如 果 匹 配 不 成 功 ， 该 方法 就 返回 nul1 


exec (string) 


续 表 


属性 /方法 相关 说 明 


> var re = /([dn]) (ot)dle/g; 
> re.exec ("noodle doodle"); 
["noodle" 2 a "oo"] 


exec (string) > re.exec ("noodle doodle"); 


["doodle", "d", "oo"] 
exec () 所 返回 的 数组 有 两 个 附加 属性 : index “匹配 处 的 下 标 ) 以 
及 input〔 所 搜索 的 源 字符 串 ) 


该 方法 的 功能 与 exec () 相同 ， 只 不 过 它 只 返回 true 或 false 


> /noo/.test('Noodle'); 
test (string) false 

> /noo/i.test('Noodle');} 
true 


Error 对 象 


通常 情况 下 ，Error 对 象 是 由 程序 的 运行 环境 (如 浏览 器 ) 或 其 代 
码 本 身 来 负责 创建 的 。 


> var e = new Error(jaavcsritp is _not_ how you spell it); 


> typeof e; 
"object" 


TP 器 本 身 ，Error 对 象 还 要 另外 留 出 派生 对 象 ， 它 们 分 


EvalError 
RangeError 
ReferenceError 
SyntaxError 
TypeError 
URIError 
Error.prototype 的 成 员 
表 C-18 


属 性 名 相关 说 明 
该 属性 返回 的 是 创建 当前 错误 对 象 的 构造 器 的 名 称 


name > Var e = new EValLELrror ('OopPs ' ) ， 
> e.name; 
"EvalError" 
该 属性 返回 的 是 当前 错误 对 象 中 的 具体 信息 
message > Var e = new Error('Oops... again'); 


> Gemessadge 


"Oops... again" 


JSON 对 象 

JSON 对 象 是 ES5 的 新 对 象 。 它 并 非 构 造 器 (这 点 与 Math 对 象 很 
像 ) ， 并 且 它 仅 有 两 个 方法 : parse( 〇 及 stringify()。 对 于 不 原生 支持 
JSON 对 象 的 ES3 浏 贤 器 而 言 ， 我 们 可 以 使 用 外 部 代码 来 使 其 达到 同样 
效果 ， 详 见 http:Wjson.org。 

JSON 是 JavaScript Object Notation (JavaScript 对 象 标记 法 ) 的 简 
称 。 它 是 一 个 轻 量 级 的 数据 交换 格式 。JSON 数 据 是 JavaScript 的 子 集 ， 
仅 文 持 基本 数据 类 型 ， 对 象 以 及 数组 字面 量 

JSON 对 象 的 成 员 

表 C-19 
方法 相关 说 明 

获得 JSON 格式 的 字符 串 ， 返 回 对 象 : 

汉人 


> Var 0 = JSON.parse (data); 
> OnelLlos 


parse (text, 


callback) 1 
“Balil 
[1, 2, 3] 


方法 相关 说 明 
可 选项 callback 提供 查看 与 修改 返回 值 的 能 力 。 它 会 获得 key 和 value 对 作为 参 
数 ， 并 且 可 以 修改 value， 或 删除 value (返回 undefined 即 可 ): 


> function callback (key, value) { 
console.l]og(key, value); 
if (key === 'hello') { 
return ‘bonjour'; 
} 
if (key === "hi') { 
return undefined; 
} 


parse (text, return value; 


callback) > var 0 = JSON.parse (data, callback); 


有 
Object {hello: "bonjour"} 


> o.hello; 
"bonjour" 

SS "hi ‘Er Ge 
false 


将 任何 形式 的 值 〈 通 常 为 对 象 或 数组 ) 编码 为 JSON 字符 串 


> Var oO= { 
hello: 1， 
1 区 7 
when: new Date(2015, 0, 1) 
}; 
> JSON.stringify(o); 
"{"hello":1,"hi":2,"when":"2015-01-01T08:00:00.0002Z"}" 


Sg 你 可 以 通过 第 二 个 参数 设置 一 个 callback 函数 或 者 数组 形式 的 白 名 单 ) 来 修改 
(va ne 返回 值 。 白 名 单数 组 的 键 值 部 分 就 是 你 希望 出 现在 该 集合 中 的 属性 : 
callback, JSON. stringify(o, [hellor, hi ])s 
pe “hello":l: "hi":2}" 
而 最 后 一 个 参数 则 可 以 让 我 们 获得 一 个 人 类 可 读 的 版 本 , 您 可 以 通过 它 指 定 相关 
空白 字符 串 或 空白 符 数量 : 
> JSON.stringify(o, null, 4); 
| "hello": 1, 
“hrm 


"when": "2015-01-01T08:00:00.0002" 
上 


附录 D 正则 表达 式 


当 我 们 使 用 〈 第 4 章 对 象 中 所 讨论 的 ) 正则 表达 式 时 ， 可 以 对 文本 
字符 串 进 行 如 下 匹配 : 


> "some text".match(/me/); 


["me"] 


但 问题 真正 的 关键 是 正则 表达 陈 的 匹配 模式 ， 而 不 是 这 些 字 符 串 


文本 。 在 表 D-1 中 ， 我 们 详细 列 出 了 各 种 不 同 模 式 的 语法 ， 并 提供 了 相 
天 的 示例 ， 以 供 读者 参考 。 


匹配 模式 


[abc] 


[Las] 


表 D-1 


相关 说 明 

这 里 匹配 的 是 字符 类 信息 

> "some text".match(/[otx]/9g); 

[wmGw wn, “x, "tn 
这 里 匹配 的 是 某 一 区 间 内 的 字符 类 信息 。 例 如 ，[a-qd] 就 相当 于 [abcd]，[a-z] 
就 表示 我 们 要 匹配 的 是 所 有 的 小 写字 母 ， 而 [a-zA-Z20-9_] 则 表示 匹配 所 有 字 
母 、 数 字 及 下 划 线 

> "Some Text".match(/[a-z]/g); 


[Sr vm ， va ve "EE 


> "Some Text".match(/[a-zA-Z2]/9g); 


["S" "ov nd "en bi "ev we" ™E"] 
了 r r [# r r r 


匹配 模式 相关 说 明 
这 里 匹配 的 是 所 有 不 属于 表达 式 限定 范围 内 的 字符 


[~abc] > "Some Text".match(/[^a-z]/g); 
SR 1 1 i | 
这 里 匹配 的 是 a 或 者 b。 中 间 那 个 紧 杠 是 “或 者 ”的 意思 ， 该 符号 可 以 在 同一 表 
达 式 中 多 次 使 用 
> "Some Text" .match (/t1T/g) ; 
alb 
EE" 了 | 
> "Some Text".match(/t|T|Some/g); 
["Some" F wp vb] 
这 里 匹配 的 是 所 有 后 面 跟着 b 的 a 的 信息 
> "Some Text".match(/Some (?=Tex) /g) ; 
a (3=B) null 
> "Some Text".match(/Some(?= Tex)/g); 
["Some"] 
这 里 匹配 的 是 所 有 后 面 不 跟着 b 的 a 的 信息 
> "Some Text".match(/Some(?! Tex)/g); 
a (?1b) null 
> "Some Text".match(/Some(?!Tex) /9g); 
["Some"] 
反 斜 杠 主要 用 于 帮助 我 们 匹配 一 些 模式 文本 中 的 特殊 字符 
> "R2-D2",.mateh (/ [2=3]/9):; 
\ [2 R2R] 
> "R2-D2".match (/ [2\-3]/9g); 
[2 id WA 
\n 换行 符 
\r 回 车 符 
\f 换 页 符 
\t 横向 制 表 符 
\v 纵向 制 表 符 
这 里 匹配 的 是 空白 符 ， 包 括 上 面 五 个 转 义 字符 
\s > "RONn Doarmatoeh (/NSHo)s 
["\n" " | 


匹配 模式 相关 说 明 


这 里 正好 与 上 面相 反 ， 匹 配 的 是 除 空白 符 以 外 的 所 有 内 容 ， 就 相当 于 [^\s] 
\S > "R22N\i D2" matoelh(/NS/g)y 
[eR wou > eed 多] 
这 里 匹配 的 是 所 有 的 字母 、 数 字 或 下 划 线 ， 相 当 于 [A-2a-z0-9_] 


\w > "Some text!".match(/\w/g); 
LS yo nm bh - Ba z 3 7 时 六 ye ; 1 | 
这 里 匹配 的 正好 与 \w 相反 
\W > "Some text!".match (/\W/g) 
Wy 1T 1 1 $] 
这 里 匹配 的 是 所 有 的 数字 类 信息 ， 相 当 于 [0-9] 
\qa > "R2-D2 and Cc-3PO".match(/\d/g); 
【20 下 IN] 
这 里 正好 与 \d 相反， 匹配 的 是 非 数 字 类 信息 ， 相 当 于 [^0-9] 或 [^\d] 
\D > "R2-D2 aa C=3P0" matehi(/\D/g) > 
[RE 1 一 站 a 5 了 1 LL P bg ba wd” 人 HT Li % 
WE LL Wb "Ad x son] 
这 里 匹配 的 是 一 个 单词 的 边界 ， 例 如 空格 或 标点 符号 
下 面 匹配 的 是 后 面 跟着 2 的 R 或 D: 
> "R2D2 and C-3PO".match(/ [RD]2/g) ; 
[ER29 人 | 
Nb 如 果 在 上 面 的 模式 中 加 入 该 匹配 符 ， 匹 配 的 就 只 有 单词 末尾 的 那 一 个 了 : 
> "R2D2 and C-3PO" .match(/ [RD]2\b/g); 
["D2°] 
同样 的 ， 如 果 我 们 在 其 中 输入 一 个 破 折 号 ， 也 可 以 被 当做 一 个 单词 的 末尾 
> "R2=D2 and C=3PO" .nmateh(/ [RD]2\b/g); 
LZ 3 sD2"] 
这 里 的 匹配 操作 与 \b 正好 相反 
> "R2-D2 and C-3PO".match(/ [RD]2\B/g); 
\B null 
> "R2D2 and C-3PO".match(/ [RD]2\B/g); 
[=“R2nj 
[\b] 这 里 匹配 的 是 退 格 键 符 (Backspace) 
\0 这 里 匹配 的 是 null 值 


匹配 模式 


\u0000 


\x00 


相关 说 明 


这 里 匹配 的 是 一 个 Unicode 字符 ， 并 且 是 以 一 个 四 位 的 十 六 进 制 数 来 表示 的 
>"cmomH" .match(/ 八 u0441\u0442N\u043E/) 
["cmzmo"] 
这 里 匹配 的 是 一 个 字符 ， 该 字符 的 编码 是 以 一 个 两 位 的 十 六 进 制 数 来 表示 的 
2 
"ad" 
> "dude" .match (/\x64/9g); 
mi i 
这 里 匹配 的 是 字符 串 开 头 部 分 。 另 外 ， 如 果 我 们 对 该 模式 设置 了 m 修饰 符 (多 
行 )， 那 么 它 匹 配 的 是 每 一 行 的 开头 
>"regular\nregular\nexpression".match (/z/g) : 
Lo men i i | 
>"regular\nregular\nexpression".match(/^r/g); 
[2 ] 
>"regular\nregular\nexpression".match (/^r/mg); 
Ee J] 
这 里 匹配 的 是 输入 消息 的 末尾 部 分 。 另 外 ， 如 果 我 们 对 该 模式 设置 了 多 行 修饰 
符 ， 那 么 它 匹配 的 是 每 一 行 的 末尾 
>"regular\nregular\nexpression".match(/r$/g); 
null 
>"regular\nregular\nexpression".match (/r$/mg); 
[em 时 
这 里 匹配 的 是 除了 新 行 符 或 换行 符 以 外 的 任何 字符 
> "regular" .match (/r./g9); 
["re"] 
> TEGGULAar™ matoh(/r.. ,£9) 
["reg wa 
这 里 匹配 的 是 模式 中 间 出 现 0 次 或 多 次 的 内 容 。 例如 , /.*/ 可 以 匹配 任何 内 容 (包括 空 串 ) 
SS wr te t(/ a 


FE 
> "anything".match (/.*/) 
["anything"] 


> "anything".match (/n.*h/); 
[ TY nyth" ] 


需要 注意 的 是 ， 该 模式 匹配 采用 的 是 “贪心 策略 ”， 这 意味 着 它 会 尽 可 能 多 地 匹 
配 一 些 可 能 


续 表 


匹配 模式 


{n} 


{min,max} 


(pattern) 


相关 说 明 
这 里 匹配 的 是 模式 中 间 出 现 0 次 或 1 次 的 内 容 
> "anything".match (/ny?/9g); 
("ny", "n"] 
这 里 匹配 的 是 模式 中 间 出 现 至 少 1 次 (或 多 次 ) 的 内 容 
> "anything".match (/ny+/9g); 
["ny"] 


> “R22-D2 and C-3P0".mateh(/ [a-Z] /gi); 
["R" 和 wD a ; WB oi “dr LA Tp "oO"] 


> "R2-D2 and C-3PO".match(/[a-z]+/gi); 
LR EF Wd 5 "and" i i iy 到 "PO"] 

这 里 匹配 的 是 模式 中 间 出 现 过 n 次 的 内 容 ， 
> "regular expression".match(/s/g); 
La “sl 


> "regular expression".match(/s{2}/9g); 
["ss"] 


> "regular expression".match(/\b\w{3}/9g); 
[ " reg" 和 "exp" ] 


这 里 匹配 的 是 在 模式 中 出 现 次 数 在 min 到 max 之 间 的 信息 。 如 果 我 们 省 略 了 max， 


就 意味 着 没有 最 多 次 数 ， 只 有 最 少 次 数 。 但 min 是 不 能 省 略 的 。 
例如 ， 如 果 我 们 在 输入 “doodle” 这 个 词 时 输入 了 10 个 “0o”: 
> "dooooo0o0000dle".match(/o0/9g); 
[OO om Mom Tom Wov. Vo, Wom Vow Vo "on] 
> "Qoooooooooodle" .match (/o/glength) ， 
[oO "0; Yo on7 "66°] 
10 
>"doooooo0000dle".match(/o{2,}/9); 
["oo""oo""oo""oo""oo"] 
>"dqoooooooooodle" .match (/o{2,6}/9g); 
["oooooo" ，"oooo"] 


当 某 个 匹配 模式 被 放 在 括号 内 时 ， 就 表明 匹配 该 模式 的 匹配 串 是 可 蔡 换 的 ， 因 此 


它 也 被 称 为 捕获 模式 
这 些 被 捕获 的 匹配 串 可 以 分 别 用 $1、$2…$9 等 参数 来 表示 
例如 ， 我 们 可 以 将 匹配 串 中 所 有 的 “r” 都 重复 一 次 : 


匹配 模式 相关 说 明 


> "regular expression".replace(/(r)/g, '$1$1'); 
"rregularr exprression" 


或 我 们 将 所 有 匹配 “re” 的 内 容 都 替换 成 “er”: 


> "regular expression".replace (/(r) (e)/g, '$2$1°'); 


(pattern) 


"ergular experssion" 


这 不 是 捕获 模式 ， 也 就 是 说 这 里 不 能 用 $1、$2 等 参数 来 记录 匹配 串 
例如 在 下 面 的 示例 中 ， 当 我 们 对 “re” 进 行 匹 配 时 ，$1 记 住 的 不 是 “r”， 而 是 
第 二 个 模式 所 匹配 的 结果 e: 


> "regular expression".replace (/(?:r) (e)/g, '$1$1'); 


(?:pattern) 


"eegular expeession" 


有 时 候 ， 模 式 中 的 某 些 特殊 字符 所 代表 的 意义 往往 不 止 一 种 ， 例 
如 和 、?、\b 等 ， 因 此 在 我 们 使 用 时 有 必要 对 此 稍 加 留意 。 


